html - margin-bottom 在 flexbox 中不起作用

Question

我有一个问题，我有一个 flexbox，但我不完全希望每个元素都根据给定的属性进行间隔，所以我想玩一下边距。

我在框的顶部有一个标题，但我希望它与其余元素之间有间距。

所以我希望将我的 p 元素列表组合在一起，但距离标题更远。

但是，当我执行 margin-bottom 时它没有任何效果(当我增加或减少 margin-bottom 时没有任何变化)。

我最初是用百分比来做的，后来改为像素，但这似乎也不是问题。

在代码片段中，我对它的外观没有任何问题，但在更大的浏览器上，标题和 p 元素之间几乎没有任何空间，这就是问题所在。

.container {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  min-height: 70vh;
  width: 70%;
  margin: 5% auto 8% auto;
  background-color: white;
}
.container p {
  margin-bottom: 2%;
}
.container h2 {
  color: orange;
  font-size: 34px;
}
.middle p:first-child {
  margin-top: 8%;
}
.bspace {
  margin-bottom: 50px;
}
.box h2 {
  color: orange;
  text-align: center;
}
.left {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
  order: 1;
  width: 30%;
}
.middle {
  display: flex;
  flex-flow: column wrap;
  order: 2;
  width: 45%;
  height: 100%;
}

<div class="container">
  <div class="left">
    <img src="home.jpg" alt="Picture of kid">
    <img src="catering.jpg" alt="Picture of kid">
  </div>
  <div class="middle">
    <h2 class="bspace"> Some Text </h2>
    <p>Sample</p>
    <p>Sample</p>
    <p>Sample</p>
    <p>Sample</p>
  </div>
</div>

Answer 1

删除 height来自 flex 元素(也是嵌套的 flex 容器)的声明:

.middle {
    display: flex;
    flex-flow: column wrap;
    order: 2;
    width: 45%;
    /* height: 100%;  <-- REMOVE */
}

这将覆盖默认值 align-items: stretch在容器上，这自然会为元素提供全高。

因为 you're using height: 100% improperly ，它没有像您预期的那样工作。它正在计算 height: auto (内容高度)因为您没有指定 height在 parent 身上。因此，没有空间可用于 <p>元素移动得更远。摆脱它。 Flex 高度更简单、更容易。

然后，到空间<p>远离标题的元素，使用 flex auto margin .

.bspace {
    margin-bottom: auto;  /* previous value `50px` in your code */
}

或者，您可以使用 margin-top: auto第一<p> ，效果相同。

.container {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  min-height: 70vh;
  width: 70%;
  margin: 5% auto 8% auto;
  background-color: lightyellow;
}
.container p {
  margin-bottom: 2%;
}
.container h2 {
  color: orange;
  font-size: 34px;
}
.middle p:first-child {
  margin-top: 8%;
}
.bspace {
  /* margin-bottom: 50px; */
  margin-bottom: auto;
  /* new */
}
.box h2 {
  color: orange;
  text-align: center;
}
.left {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
  order: 1;
  width: 30%;
  border: 1px dashed red;
}
.middle {
  display: flex;
  flex-flow: column wrap;
  order: 2;
  width: 45%;
  /* height: 100%; */
  border: 1px dashed green;
}

<div class="container">
  <div class="left">
    <img src="home.jpg" alt="Picture of kid">
    <img src="catering.jpg" alt="Picture of kid">
  </div>
  <div class="middle">
    <h2 class="bspace"> Some Text </h2>
    <p>Sample</p>
    <p>Sample</p>
    <p>Sample</p>
    <p>Sample</p>
  </div>
</div>

jsFiddle