边距底部不在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容器上的默认值，这自然会赋予元素全高。

因为您使用height: 100%不当，它没有按您预期的那样工作。它正在计算height: auto（内容高度），因为您尚未height在父项上指定 a 。因此，没有空间可供<p>元素移动得更远。摆脱它。Flex height 更简单更容易。

然后，要将<p>元素与标题隔开，请使用flex automargin。

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

或者，您可以margin-top: auto在第一个上使用<p>，这将具有相同的效果。

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

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

js小提琴