CSS Flex Box 布局：全宽行和列

Posted 2023-03-06

【中文标题】CSS Flex Box 布局：全宽行和列

【英文标题】：CSS Flex Box Layout: full-width row and columns

【发布时间】：2014-11-27 10:38:07

【问题描述】：

各位程序员大家好！

我有一个简单的盒子布局，我很想用 flexbox 来实现，但我就是想不通。它应该看起来像这张图片。

所以基本上是一行和两列，行固定在 100 像素高，但都在一个容器中。到目前为止我的代码是：

#productShowcaseContainer 
  display: inline-flex;
  flex-flow: row wrap;
  height: 600px;
  width: 580px;
  background-color: rgb(240, 240, 240);


#productShowcaseTitle 
  display: inline-block;
  height: 100px;
  width: 100%;
  background-color: rgb(200, 200, 200);


#productShowcaseDetail 
  flex: 3;
  background-color: red;


#productShowcaseThumbnailContainer 
  flex: 2;
  background-color: blue;

<div id="productShowcaseContainer">
  <div id="productShowcaseTitle"></div>
  <div id="productShowcaseDetail"></div>
  <div id="productShowcaseThumbnailContainer"></div>
</div>

我知道这可以通过多种方式实现，但我更喜欢使用 CSS Flex。

【参考方案1】：

只需使用另一个容器来包装最后两个 div。 不要忘记使用 CSS 前缀。

#productShowcaseContainer 
   display: flex;
   flex-direction: column;
   height: 600px;
   width: 580px;
   background-color: rgb(240, 240, 240);


#productShowcaseTitle 
   height: 100px;
   background-color: rgb(200, 200, 200);


#anotherContainer
   display: flex;
   height: 100%;


#productShowcaseDetail 
   background-color: red;
   flex: 4;


#productShowcaseThumbnailContainer 
   background-color: blue;
   flex: 1;

<div id="productShowcaseContainer">
   <div id="productShowcaseTitle">1</div>
   <div id="anotherContainer">
      <div id="productShowcaseDetail">2</div>
      <div id="productShowcaseThumbnailContainer">3</div>
   </div>
</div>

【参考方案2】：

这是从上面复制的，但稍微浓缩并用语义术语重新编写。注意：#Container 具有 display: flex; 和 flex-direction: column;，而列具有 flex: 3; 和 flex: 2;（其中“一个值，无单位数”确定 flex-grow 属性）每个 MDN flex docs。

#Container 
  display: flex;
  flex-direction: column;
  height: 600px;
  width: 580px;


.Content 
  display: flex;
  flex: 1;


#Detail 
  flex: 3;
  background-color: lime;


#ThumbnailContainer 
  flex: 2;
  background-color: black;

<div id="Container">
  <div class="Content">
    <div id="Detail"></div>
    <div id="ThumbnailContainer"></div>
  </div>
</div>

【讨论】：

不回答问题。

【参考方案3】：

你几乎完成了。但是，将 flex: 0 0 <basis> 声明设置为列会阻止它们增长/缩小；而<basis> 参数将定义列的宽度。

此外，您可以使用 CSS3 calc() 表达式来指定列的 height 相对于标题的高度。

#productShowcaseTitle 
  flex: 0 0 100%; /* Let it fill the entire space horizontally */
  height: 100px;


#productShowcaseDetail,
#productShowcaseThumbnailContainer 
  height: calc(100% - 100px); /* excluding the height of the header */

#productShowcaseContainer 
  display: flex;
  flex-flow: row wrap;

  height: 600px;
  width: 580px;


#productShowcaseTitle 
  flex: 0 0 100%; /* Let it fill the entire space horizontally */
  height: 100px;
  background-color: silver;


#productShowcaseDetail 
  flex: 0 0 66%; /* ~ 2 * 33.33% */
  height: calc(100% - 100px); /* excluding the height of the header */
  background-color: lightgray;


#productShowcaseThumbnailContainer 
  flex: 0 0 34%;  /* ~ 33.33% */
  height: calc(100% - 100px); /* excluding the height of the header */
  background-color: black;

<div id="productShowcaseContainer">
  <div id="productShowcaseTitle"></div>
  <div id="productShowcaseDetail"></div>
  <div id="productShowcaseThumbnailContainer"></div>
</div>

（由于简洁而省略了供应商前缀）

---

或者，如果您可以更改标记，例如用一个额外的<div> 元素包装列，可以在不使用calc() 的情况下实现，如下所示：

<div class="contentContainer"> <!-- Added wrapper -->
    <div id="productShowcaseDetail"></div>
    <div id="productShowcaseThumbnailContainer"></div>
</div>

#productShowcaseContainer 
  display: flex;
  flex-direction: column;
  height: 600px; width: 580px;


.contentContainer  display: flex; flex: 1; 
#productShowcaseDetail  flex: 3; 
#productShowcaseThumbnailContainer  flex: 2; 

#productShowcaseContainer 
  display: flex;
  flex-direction: column;

  height: 600px;
  width: 580px;


.contentContainer 
  display: flex;
  flex: 1;


#productShowcaseTitle 
  height: 100px;
  background-color: silver;


#productShowcaseDetail 
  flex: 3;
  background-color: lightgray;


#productShowcaseThumbnailContainer 
  flex: 2;
  background-color: black;

<div id="productShowcaseContainer">
  <div id="productShowcaseTitle"></div>

  <div class="contentContainer"> <!-- Added wrapper -->
    <div id="productShowcaseDetail"></div>
    <div id="productShowcaseThumbnailContainer"></div>
  </div>
</div>

（由于简洁而省略了供应商前缀）

【讨论】：

嗯，成功了，谢谢！我记得前段时间在 CSS Flex 中使用了另一种方法，但那可能是在更改应用于 flex 之前。由于该行设置为“flex: 1 [something more]”，因此自动填写了高度。

@martinandrovich 欢迎您。您提到的方法似乎是我在回答中提出的第二种方法:-)

感谢 @HashemQolami 提供有用的 smippet

我必须在我的容器中添加一个 flex-wrap 来执行这个解决方案。