Question

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

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

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

然而，当我margin-bottom时，它没有效果（当我增加或减少时margin-bottom没有任何变化）。

我最初是以百分比形式进行的，并将其更改为像素，但这似乎也不是问题。

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

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 1

从flex项目（也是嵌套的Flex容器）中删除height声明：

.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。因此，<p>元素没有空间可以进一步移动。摆脱它。弯曲高度更简单，更容易。

然后，要将<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

边距底部不在flexbox中工作

1 个答案: