Flexbox - 弹性项目布局对齐问题[重复]

Question

我遇到了一个由 flexbox 属性引起的问题。我需要通过向上移动第三个孩子来填充第一个孩子的下方空间。 flexbox有可能吗？在此处添加代码。 jsfiddle

HTML/CSS

.flex {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items:flex-start;
  align-content:flex-start;
}

.flex-child {
  height: 200px;
}

.one {
  width: 70%;
  height: 100px;
  background-color: #bada55;
}

.two {
  width: 30%;
  background-color: #f00;
}

.three {
  width: 70%;
  background-color: #0f0;
}

<div class="flex">
  <div class="flex-child one"></div>
  <div class="flex-child two"></div>
  <div class="flex-child three"></div>
</div>

Answer 1

Flexbox 是单向的，你不能直接做。

要实现这种布局，您需要组合第一个和第三个孩子，然后应用 flex。

<div class="flex">
  <div class="flex-child one">
    <div class="one"></div>
    <div class="third"></div>
  </div>
  <div class="flex-child two"></div>
</div>

或者考虑使用网格布局，这是一种二维布局

Answer 2

给你。

您实际上并不需要 flexbox 来实现这一点，只需古老的 position: absolute。 ;)

@media only screen and (min-width: 640px) {
  .container {
    position: relative;
  }
}

@media only screen and (min-width: 640px) {
  .child {
    width: 70%;
  }
}

.one {
  background: rgba(255, 0, 0, 0.2);
}

.two {
  background: rgba(0, 0, 255, 0.2);
}
@media only screen and (min-width: 640px) {
  .two {
    width: 30%;
    position: absolute;
    top: 0;
    right: 0;
  }
}

.three {
  background: rgba(0, 128, 0, 0.2);
}

<div class="container">
  <div class="child one">1. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla maxime fuga architecto magni suscipit dignissimos eius modi excepturi eos ab, quia ipsum dolor tenetur reprehenderit incidunt dicta maiores, quibusdam quas! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim magnam ut repellat quibusdam! Dolorem, sunt?</div>
  <div class="child two">2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem vel amet ut, iste eveniet quidem neque natus eum ipsum inventore quod veritatis a ipsam eos, non impedit minus, itaque magni? Lorem ipsum dolor sit amet.</div>
  <div class="child three">3. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam voluptatem quibusdam sed consectetur! Impedit numquam voluptatem nemo qui magnam natus suscipit architecto inventore! Voluptatem reprehenderit, aperiam nam laborum hic explicabo!</div>  
</div>