挠性盒尺寸错误

Question

我想用flex做三个街区。第一列必须占据整个柱子，其余2必须安排在第二栏中，各占高度的50%。第二列的第一列是图像，我希望第三列，它只包含文本，是相同的高度。不幸的是，即使这个文本块看起来与我的图像大小相同，第一列的大小也仅限于这个块中文本的末尾。

​

.superposition {
  display: flex;
  width: 70%;
}
.block-orange {
  background-color: #F26522;
  color: white;
  padding: 10px;
  flex: 0 0 30%;
}
.superposition .flex-col {
  display: flex;
  flex-direction: column;
}
.superposition div div {
  flex: 0 0 50%;
}
.bg-white {
  background-color: yellow;
  color: #627188;
}
.bg-grey{
  background-color: grey;
 }

<section class="superposition">
    <div class="block-orange">
        <h2>bright ass orange</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque sunt possimus tenetur porro aliquam, tempora itaque aperiam perspiciatis reiciendis dignissimos assumenda odit incidunt sit voluptatem quae laudantium. Accusamus, cum at?</p>
     </div>
     <div class="flex-col">
         <div class="bg-grey">
             <img src="img/header-soleil.png" alt="couché de soleil">
         </div>
         <div class="bg-white">
              <h2>finaly a layout that blows your head off</h2>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Totam quod excepturi laboriosam vero numquam tenetur corporis iusto magni quaerat eaque dolore, assumenda unde est nostrum saepe fugiat nam doloremque esse.
               </p>
         </div>
     </div>
</section>

​

为什么第一列(橙色块)不能适应第二列的高度？

​

Answer 1

似乎您想要一个网格，其中：

• 内容可以扩展列高度。
• 柱高总是匹配的。
• 两行分别是50%的列高。

这听起来像是一个“二维”布局，由行和列控制。

用柔性盒构建这样的布局可能是一件很困难的事情，而且/或会产生脆弱的布局。

有关参考，请参见网格布局与其他布局方法的关系

• 我是否只需要按行或列控制布局？？使用柔性箱？
• 是否需要按行和列控制布局？？使用网格吗？

也见CSS网格布局中的等高行。

我推荐用网格布局代替。

下面是一个演示：

​

body {
  margin: 0;
}

.superposition {
  display: grid;
  grid-template-columns: 30% 40%;
  grid-auto-rows: 1fr;
}

.block-orange {
  background-color: orange;
  grid-row: 1/3;
}

.bg-grey {
  background-color: grey;
}

.bg-white {
  background-color: yellow;
}

.bg-grey img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cellpad {
  box-sizing: border-box;
  padding: 1em;
}

<section class="superposition">
  <div class="block-orange cellpad">
    <h2>bright orange</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque sunt possimus tenetur porro aliquam, tempora itaque aperiam perspiciatis reiciendis dignissimos assumenda odit incidunt sit voluptatem quae laudantium. Accusamus, cum at?</p>
  </div>
  <div class="bg-grey">
    <img src="https://fakeimg.pl/440x320/282828/eae0d0/" alt="">
  </div>
  <div class="bg-white cellpad">
    <h2>finally a layout that blows your mind</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Totam quod excepturi laboriosam vero numquam tenetur corporis iusto magni quaerat eaque dolore, assumenda unde est nostrum saepe fugiat nam doloremque esse.
    </p>
  </div>
</section>

​

Answer 2

要达到你想要的结果，一种方法是应用

flex-direction: column;

组合到整个.superposition父<div>，并与：

flex-wrap: wrap;

这将确保如果.block-orange占据了.superposition高度的100%，那么.bg-grey将跟随它从.superposition的顶部开始，到.block-orange的右边。

，即--div仍然在包装，但它们是水平包装，而不是垂直包装。

工作示例：

​

.superposition {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 70%;
  height: 500px;
}

.block-orange {
  flex: 1 0 100%;
  width: 30%;
  padding: 0 10px;
  color: white;
  background-color: #F26522;
}

.bg-grey,
.bg-white {
  flex: 0 0 50%;
  width: 70%;
  padding: 0 10px;
}
  
.bg-white {
  color: #627188;
  background-color: yellow;
}

.bg-grey {
  background-color: grey;
 }

<section class="superposition">
  
  <div class="block-orange">
    <h2>bright ass orange</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque sunt possimus tenetur porro aliquam, tempora itaque aperiam perspiciatis reiciendis dignissimos assumenda odit incidunt sit voluptatem quae laudantium. Accusamus, cum at?</p>
  </div>
  
  <div class="bg-grey">
    <img src="img/header-soleil.png" alt="couché de soleil">
  </div>

  <div class="bg-white">
    <h2>Finally, a layout that blows your head off</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Totam quod excepturi laboriosam vero numquam tenetur corporis iusto magni quaerat eaque dolore, assumenda unde est nostrum saepe fugiat nam doloremque esse.</p>
  </div>

</section>

​