HTML -- margin-left & -right 不适用于 flexbox

Question

我使用 flexbox 在桌面 window 屏幕中布局我的 index.html 以在一行中有两个 div 元素，在第二行中有一个长 div 元素，以及第三行中的两个 div 元素，其中一个包含一个列表。我需要在第一行和第三行的两个 div 元素之间留出一些间距。当我尝试在 div 元素上使用 margin-left 或 margin-right 时，div 元素彼此重叠。

我尝试更改每个 div 元素的宽度，但它们最终会重叠在一起。我还在内容上尝试了 justify-content 和 align-content class 但没有任何反应。

* {
    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>

Answer 1

尝试将它们放入弹性容器中。您可以调整列的宽度。请参阅下面的代码。希望对你有帮助。

* {
    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>

Answer 2

通过将我们希望位于同一行的每个项目包装在 <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;

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

* {
  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;
  width: 50%;
  margin: 0 10px;
}


/* LAYOUT */

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

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

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

.div-content {
  width: 50%;
  margin: 0 10px;
}

.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="row">
      <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>
    <div class="row">
      <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>
    <div class="row">
      <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>
  </div>

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

</html>

Answer 3

在这里，您可以根据全宽更改宽度和应用边距，并在响应模式下为全宽更改宽度

* {
    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>

Answer 4

flexbox 中的边距可能有点烦人。请注意我如何将 flex 容器宽度设置为 1oovw - 1em 然后将边距设置为 0.5em 和自动。一旦我们在它们上添加 0.5en 边距，这将在所有元素周围创建一个均匀的边距。另请注意，除非您通过增加同一行上项目的弹性基础直到它们不再适合同一行，否则没有任何东西会折叠。

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>

HTML -- margin-left & -right 不适用于 flexbox

HTML -- margin-left & -right are not working with flexbox

html

css

flexbox

margins