css HTML --左边距和右边距不适用于flexbox

unhi4e5o 于 2023-03-20 发布在其他

关注(0)|答案(5)|浏览(183)

我使用flexbox在桌面窗口屏幕中布局index.html，使两个div元素位于一行，一个长的div元素位于第二行，两个div元素位于第三行，其中一个包含列表。我需要在第一行和第三行的两个div元素之间留一些间距。当我尝试在div元素上使用margin-left或margin-right时，div元素折叠在彼此的顶部。
我试过改变每个div元素的宽度，但是它们最终会相互重叠，我也试过在内容类上使用justify-content和align-content，但是没有任何效果。

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

header {
    background-color: #414C6A;
    background-image: url("../img/img2.jpg");
    background-size: 100%;
    background-position: top left;
    position: relative;
    background-repeat: no-repeat;
    padding: 20%;
    text-align: center;
    color: white;
}

footer {
    background-color: #7481AD;
    color: white;
    text-align: center;
    padding: 14px;
}

.title {
    margin: 0;
}

.unordered_list {
    list-style: none;
}


/* STYLING CONTENT */
.content {
background-color: #554A4E;
color: white;
padding: 1.25em;
}

.div-content,
.div-list {
    padding: 0.75em;
    border-radius: 12px;
    margin-bottom: 1em;
}

.div-content p,
.div-list .unordered_list {
    margin-top: 0.3125em;
    padding: 0 0.625em;
}

.div-content {
    background-color: #25476c;
}

.div-list {
    background-color: #564B75;
}


/* LAYOUT */

body {
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.div-content {
    width: 50%;
}

.grow {
    width: 100%;
}

.div-list {
    flex-grow: 1;
}

footer {
    flex-shrink: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>CSS Basics</title>
    <!--
        Go to this link:
            http://www.cssdrive.com/imagepalette/index.php
    -->
</head>
<body>
    <header>
        <h1 class="title">CSS Basics</h1>
    </header>

    <div class="content">
        <div class="div-content item-1">
            <h2>What is Lorem Ipsum?</h2>
            <p>
                Lorem Ipsum is simply dummy text of the printing and
                typesetting industry. Lorem Ipsum has been the industry's
                standard dummy text ever since the 1500s, when an unknown
                printer took a galley of type and scrambled it to make a
                type specimen book. It has survived not only five centuries,
                but also the leap into electronic typesetting, remaining essentially
                unchanged. It was popularised in the 1960s with the release of
                Letraset sheets containing Lorem Ipsum passages, and more recently
                with desktop publishing software like Aldus PageMaker including
                versions of Lorem Ipsum.
            </p>
        </div>

        <div class="div-content item-2">
            <h2>Diego Salas</h2>
            <p>
                Lorem Ipsum is simply dummy text of the printing and
                typesetting industry. Lorem Ipsum has been the industry's
                standard dummy text ever since the 1500s, when an unknown
                printer took a galley of type and scrambled it to make a
                type specimen book. It has survived not only five centuries,
                but also the leap into electronic typesetting, remaining essentially
                unchanged. It was popularised in the 1960s with the release of
                Letraset sheets containing Lorem Ipsum passages, and more recently
                with desktop publishing software like Aldus PageMaker including
                versions of Lorem Ipsum.
            </p>
        </div>

        <div class="div-content grow">
            <h2>Diego's Favorite Dogs</h2>
            <p>
                There are many variations of passages of Lorem Ipsum available,
                but the majority have suffered alteration in some form, by injected
                humour, or randomised words which don't look even slightly believable.
                If you are going to use a passage of Lorem Ipsum, you need to be sure
                there isn't anything embarrassing hidden in the middle of text. All the
                Lorem Ipsum generators on the Internet tend to repeat predefined chunks
                as necessary, making this the first true generator on the Internet. It
                uses a dictionary of over 200 Latin words, combined with a handful of
                model sentence structures, to generate Lorem Ipsum which looks
                reasonable. The generated Lorem Ipsum is therefore always free
                from repetition, injected humour, or non-characteristic words etc.
            </p>
        </div>

        <div class="div-list">
            <h2>Diego's Favorite Programming Language</h2>
            <ul class="unordered_list">
                <li>Python</li>
                <li>Java</li>
                <li>C/C++</li>
                <li>JavaScript</li>
            </ul>
        </div>
<!--        <img src="img/img1.jpg" alt="Mountain">-->

        <div class="div-content">
            <h2>Why do we use it?</h2>
            <p>
                Lorem Ipsum is simply dummy text of the printing and
                typesetting industry. Lorem Ipsum has been the industry's
                standard dummy text ever since the 1500s, when an unknown
                printer took a galley of type and scrambled it to make a
                type specimen book. It has survived not only five centuries,
                but also the leap into electronic typesetting, remaining essentially
                unchanged. It was popularised in the 1960s with the release of
                Letraset sheets containing Lorem Ipsum passages, and more recently
                with desktop publishing software like Aldus PageMaker including
                versions of Lorem Ipsum.
            </p>
        </div>
    </div>

    <footer>
        <p>CSS Basics &copy; Diego Salas</p>
    </footer>
</body>
</html>

css

来源：https://stackoverflow.com/questions/57470643/html-margin-left-right-are-not-working-with-flexbox

5条答案

按热度按时间

vom3gejh1#

通过将我们希望位于同一行的每一个元素 Package 在一个<div class="row"></div>中，你就可以让每个元素占据该行宽度的一半，这也会考虑到元素的边距。
这里的重要部分是：

.row {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-around;
  margin: 10px 0;
}

这使得每个row元素的宽度是其父对象的100%，在本例中是container元素。
然后，您只需设置.div-content和.div-list的宽度和边距

width: 50%;
margin: 0 10px;

下面的代码片段展示了这一点。
一个二个一个一个

赞(0）回复(0）举报 2023-03-20

jxct1oxe2#

试着把它们放在一个flex容器中。你可以调整列的宽度。参见下面的代码。希望能有所帮助。

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

header {
    background-color: #414C6A;
    background-image: url("../img/img2.jpg");
    background-size: 100%;
    background-position: top left;
    position: relative;
    background-repeat: no-repeat;
    padding: 20%;
    text-align: center;
    color: white;
}

footer {
    background-color: #7481AD;
    color: white;
    text-align: center;
    padding: 14px;
}

.title {
    margin: 0;
}

.unordered_list {
    list-style: none;
}

.div-content-container {
  display: flex;
}

.div-content {
  margin: 0 10px;
  flex: 1 0 auto;
}

<header>
  <h1 class="title">CSS Basics</h1>
</header>

<div class="content">
  <div class="div-content-container">
    <div class="div-content item-1">
      <h2>What is Lorem Ipsum?</h2>
      <p>...</p>
    </div>

    <div class="div-content item-2">
      <h2>Diego Salas</h2>
      <p>...</p>
    </div>
  </div>
  <div class="div-content grow">
    <h2>Diego's Favorite Dogs</h2>
    <p>...</p>
  </div>
  <div class="div-content-container">
    <div class="div-content div-list">
      <h2>Diego's Favorite Programming Language</h2>
      <ul class="unordered_list">
        <li>Python</li>
        <li>Java</li>
        <li>C/C++</li>
        <li>JavaScript</li>
      </ul>
    </div>
    <div class="div-content">
      <h2>Why do we use it?</h2>
      <p>...</p>
    </div>
  </div>
</div>

<footer>
  <p>CSS Basics &copy; Diego Salas</p>
</footer>

赞(0）回复(0）举报 2023-03-20

fdbelqdn3#

在这里，您可以更改宽度和应用基于全宽的边距，并在响应模式下更改全宽宽度

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

header {
    background-color: #414C6A;
    background-image: url("../img/img2.jpg");
    background-size: 100%;
    background-position: top left;
    position: relative;
    background-repeat: no-repeat;
    padding: 20%;
    text-align: center;
    color: white;
}

footer {
    background-color: #7481AD;
    color: white;
    text-align: center;
    padding: 14px;
}

.title {
    margin: 0;
}

.unordered_list {
    list-style: none;
}


/* STYLING CONTENT */
.content {
background-color: #554A4E;
color: white;
padding: 1.25em;
}

.div-content,
.div-list {
    padding: 0.75em;
    border-radius: 12px;
    margin-bottom: 1em;
}

.div-content p,
.div-list .unordered_list {
    margin-top: 0.3125em;
    padding: 0 0.625em;
}

.div-content {
    background-color: #25476c;
}

.div-list {
    background-color: #564B75;
}


/* LAYOUT */

body {
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.div-content {
    width: 48.5%;
    margin:5px 0.5% 5px 1%;
}

.div-content.rightdiv {
    width: 48.5%;
    margin:5px 1% 5px 0.5%;
}

.grow {
    width: 98%;
    margin:5px 1%;
}

.div-list {
    flex-grow: 1;
    width: 48.5%;
    margin:5px 0.5% 5px 1%;
}

footer {
    flex-shrink: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>CSS Basics</title>
    <!--
        Go to this link:
            http://www.cssdrive.com/imagepalette/index.php
    -->
</head>
<body>
    <header>
        <h1 class="title">CSS Basics</h1>
    </header>

    <div class="content">
        <div class="div-content item-1">
            <h2>What is Lorem Ipsum?</h2>
            <p>
                Lorem Ipsum is simply dummy text of the printing and
                typesetting industry. Lorem Ipsum has been the industry's
                standard dummy text ever since the 1500s, when an unknown
                printer took a galley of type and scrambled it to make a
                type specimen book. It has survived not only five centuries,
                but also the leap into electronic typesetting, remaining essentially
                unchanged. It was popularised in the 1960s with the release of
                Letraset sheets containing Lorem Ipsum passages, and more recently
                with desktop publishing software like Aldus PageMaker including
                versions of Lorem Ipsum.
            </p>
        </div>

        <div class="div-content item-2 rightdiv">
            <h2>Diego Salas</h2>
            <p>
                Lorem Ipsum is simply dummy text of the printing and
                typesetting industry. Lorem Ipsum has been the industry's
                standard dummy text ever since the 1500s, when an unknown
                printer took a galley of type and scrambled it to make a
                type specimen book. It has survived not only five centuries,
                but also the leap into electronic typesetting, remaining essentially
                unchanged. It was popularised in the 1960s with the release of
                Letraset sheets containing Lorem Ipsum passages, and more recently
                with desktop publishing software like Aldus PageMaker including
                versions of Lorem Ipsum.
            </p>
        </div>

        <div class="div-content grow">
            <h2>Diego's Favorite Dogs</h2>
            <p>
                There are many variations of passages of Lorem Ipsum available,
                but the majority have suffered alteration in some form, by injected
                humour, or randomised words which don't look even slightly believable.
                If you are going to use a passage of Lorem Ipsum, you need to be sure
                there isn't anything embarrassing hidden in the middle of text. All the
                Lorem Ipsum generators on the Internet tend to repeat predefined chunks
                as necessary, making this the first true generator on the Internet. It
                uses a dictionary of over 200 Latin words, combined with a handful of
                model sentence structures, to generate Lorem Ipsum which looks
                reasonable. The generated Lorem Ipsum is therefore always free
                from repetition, injected humour, or non-characteristic words etc.
            </p>
        </div>

        <div class="div-list">
            <h2>Diego's Favorite Programming Language</h2>
            <ul class="unordered_list">
                <li>Python</li>
                <li>Java</li>
                <li>C/C++</li>
                <li>JavaScript</li>
            </ul>
        </div>
<!--        <img src="img/img1.jpg" alt="Mountain">-->

        <div class="div-content rightdiv">
            <h2>Why do we use it?</h2>
            <p>
                Lorem Ipsum is simply dummy text of the printing and
                typesetting industry. Lorem Ipsum has been the industry's
                standard dummy text ever since the 1500s, when an unknown
                printer took a galley of type and scrambled it to make a
                type specimen book. It has survived not only five centuries,
                but also the leap into electronic typesetting, remaining essentially
                unchanged. It was popularised in the 1960s with the release of
                Letraset sheets containing Lorem Ipsum passages, and more recently
                with desktop publishing software like Aldus PageMaker including
                versions of Lorem Ipsum.
            </p>
        </div>
    </div>

    <footer>
        <p>CSS Basics &copy; Diego Salas</p>
    </footer>
</body>
</html>

赞(0）回复(0）举报 2023-03-20

uqjltbpv4#

在flexbox中，边距可能有点烦人。注意我是如何将flex容器的宽度设置为1 oovw-1 em，然后将边距设置为0.5em并自动设置的。这将在所有元素周围创建一个均匀的边距，一旦我们在它们上面添加了0.5en的边距。还要注意什么都不会折叠，除非你通过增加同一行上项目的flex基础，直到它们不再适合同一行。

body {
    margin: 0;
    padding: 0;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;

    /* fix flex container margin values can be adjust for desired margin */
    width: calc(100vw - 1em); /* Sets the width of the container 100 view width - 2em */
    margin: 0.5em auto; /* centers the container on the page and gives a margin top to keep the margin uniform */

    /* note that the width margin value should be double the desired margin */
}

.flex-container .child-flex-element {
    font-family: sans-serif;
    background: seagreen;
    color: white;
    margin: 0.5em;
    padding: 2em;

}

/* from here you can adjust the individual widths of each element by using flex-basis or max/min-width properties */

/* You can also add media queries to make it responsive to screen sizes */
#item-one {
    flex-basis: 100%;
    height: calc(16vh - 5em);
}

#item-two {
    flex-basis: calc(50% - 5em);
}

#item-three {
    flex-basis: calc(50% - 5em);
}

#item-four {
    flex-basis: 100%;
}

#item-five {
    flex-basis:  100%;
    height: calc(16vh - 5em);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="flex-container">
        <div id="item-one" class="child-flex-element">Header</div>
        <div id="item-two" class="child-flex-element">
            <h2>What is Lorem Ipsum?</h2>
            <p>
                Lorem Ipsum is simply dummy text of the printing and
                typesetting industry. Lorem Ipsum has been the industry's
                standard dummy text ever since the 1500s, when an unknown
                printer took a galley of type and scrambled it to make a
                type specimen book. It has survived not only five centuries,
                but also the leap into electronic typesetting, remaining essentially
                unchanged. It was popularised in the 1960s with the release of
                Letraset sheets containing Lorem Ipsum passages, and more recently
                with desktop publishing software like Aldus PageMaker including
                versions of Lorem Ipsum.
            </p>
        </div>
        <div id="item-three" class="child-flex-element">
            <h2>Diego Salas</h2>
            <p>
                Lorem Ipsum is simply dummy text of the printing and
                typesetting industry. Lorem Ipsum has been the industry's
                standard dummy text ever since the 1500s, when an unknown
                printer took a galley of type and scrambled it to make a
                type specimen book. It has survived not only five centuries,
                but also the leap into electronic typesetting, remaining essentially
                unchanged. It was popularised in the 1960s with the release of
                Letraset sheets containing Lorem Ipsum passages, and more recently
                with desktop publishing software like Aldus PageMaker including
                versions of Lorem Ipsum.
            </p>
        </div>
        <div id="item-four" class="child-flex-element">
            <h2>Diego's Favorite Programming Language</h2>
            <ul class="unordered_list">
                <li>Python</li>
                <li>Java</li>
                <li>C/C++</li>
                <li>JavaScript</li>
            </ul>
        </div>
        <div id="item-five" class="child-flex-element">Footer</div>
    </div>
</body>
</html>

赞(0）回复(0）举报 2023-03-20

jc3wubiy5#

在父元素上使用inline-flex：