html - 如何消除 flex 元素内的差距？

Question

随着display:flex的增加，div中的文字出现了巨大的差距

添加额外的 div 包装可能不是可能影响移动版本的解决方案。 手机端应该是这个样子👇

p {
  margin: 10px;
}

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

.my-wrap {
  width: 90%;
  margin: 50px auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: 1px solid #eee;
  color: #fff;
}

.wrap-one,
.wrap-two {
  width: 75%;
}

.wrap-one {
  background-color: tomato;
  flex: 1;
}

.wrap-two {
  background-color: deepskyblue;
}

.wrap-three {
  background-color: greenyellow;
  flex-basis: 100%;
  width: 25%;
}

<div class="my-wrap">
  <div class="wrap-one">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
  </div>
  <div class="wrap-two">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat commodi aspernatur et! Voluptates officiis nemo corporis delectus pariatur. Cupiditate perspiciatis illum minima, porro voluptas velit nobis ad eveniet modi explicabo.</p>
  </div>
  <div class="wrap-three">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis reprehenderit, necessitatibus vel praesentium dolorum vitae sequi in magni voluptate alias fugit saepe eos sint dolore quae sapiente sunt itaque, cupiditate.</p>
  </div>
</div>

Answer 1

首先，您会遇到异常行为，因为您在绿色元素 (.wrap-three) 上指定了 flex-basis: 100%，但没有指定 parent 的高度。

在 CSS 中，要使百分比高度在浏览器中正常工作，您应该始终指定父项的高度。

将此添加到您的代码中:

html, body, .my-wrap { height: 100%; }

html,
body,
.my-wrap {
  height: 100%;
}

p {
  margin: 10px;
}

body {
  display: flex;
  flex-wrap: wrap;
}

.my-wrap {
  width: 90%;
  margin: 50px auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: 1px solid #eee;
  color: #fff;
}

.wrap-one,
.wrap-two {
  width: 75%;
}

.wrap-one {
  background-color: tomato;
  flex: 1;
}

.wrap-two {
  background-color: deepskyblue;
}

.wrap-three {
  background-color: greenyellow;
  flex-basis: 100%;
  width: 25%;
}

<div class="my-wrap">
  <div class="wrap-one">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
  </div>
  <div class="wrap-two">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat commodi aspernatur et! Voluptates officiis nemo corporis delectus pariatur. Cupiditate perspiciatis illum minima, porro voluptas velit nobis ad eveniet modi explicabo.</p>
  </div>
  <div class="wrap-three">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis reprehenderit, necessitatibus vel praesentium dolorum vitae sequi in magni voluptate alias fugit saepe eos sint dolore quae sapiente sunt itaque, cupiditate.</p>
  </div>
</div>

其次，由于您没有在 flex 容器上指定高度，浏览器可以自行决定解释高度。

为了更稳定的布局，试试这个(例如):.my-wrap { height: 300px }

p {
  margin: 10px;
}

body {
  display: flex;
  flex-wrap: wrap;
}

.my-wrap {
  height: 300px;
  width: 90%;
  margin: 50px auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: 1px solid #eee;
  color: #fff;
}

.wrap-one,
.wrap-two {
  width: 75%;
}

.wrap-one {
  background-color: tomato;
  flex: 1;
}

.wrap-two {
  background-color: deepskyblue;
}

.wrap-three {
  background-color: greenyellow;
  flex-basis: 100%;
  width: 25%;
}

<div class="my-wrap">
  <div class="wrap-one">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
  </div>
  <div class="wrap-two">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat commodi aspernatur et! Voluptates officiis nemo corporis delectus pariatur. Cupiditate perspiciatis illum minima, porro voluptas velit nobis ad eveniet modi explicabo.</p>
  </div>
  <div class="wrap-three">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis reprehenderit, necessitatibus vel praesentium dolorum vitae sequi in magni voluptate alias fugit saepe eos sint dolore quae sapiente sunt itaque, cupiditate.</p>
  </div>
</div>

更多信息:

• Working with the CSS height property and percentage values
• Chrome / Safari not filling 100% height of flex parent