CSS Flex Box 布局：全宽行和列

CSS Flex Box Layout: full-width row and columns

提问by Androvich

Hello fellow programmers!

各位程序员朋友们好！

I've got a simple box-layout which I would love to achieve using flexbox, but I simply can't figure it out. It should look like this image.

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

So basically a row and two columns, with the row being fixed at lets say 100px in height, but all in one container. My code so far is:

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

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

I know this can be achieved in many ways, but I would really prefer to use CSS Flex.

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

回答by Hashem Qolami

You've almost done it. However setting flex: 0 0 <basis>declaration to the columns would prevent them from growing/shrinking; And the <basis>parameter would define the width of columns.

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

In addition, you could use CSS3 calc()expression to specify the heightof columns with the respect to the height of the header.

此外，您可以使用 CSS3calc()表达式来指定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>

(Vendor prefixes omitted due to brevity)

（为简洁起见，省略了供应商前缀）

---

---

Alternatively, if you could change your markup e.g. wrapping the columns by an additional <div>element, it would be achieved without using calc()as follows:

或者，如果您可以更改标记，例如通过附加<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>

(Vendor prefixes omitted due to brevity)

（为简洁起见，省略了供应商前缀）

回答by w411 3

Just use another container to wrap last two divs. Don't forget to use CSS prefixes.

只需使用另一个容器来包装最后两个 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>

回答by DeBraid

This is copied from above, but condensed slightly and re-written in semantic terms. Note: #Containerhas display: flex;and flex-direction: column;, while the columns have flex: 3;and flex: 2;(where "One value, unitless number" determines the flex-growproperty) per MDN flexdocs.

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

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