CSS Flex Box 布局: 全宽行和列

各位程序员好！

我有一个简单的方块布局，我想实现使用弹性方块，但我就是想不出来。它应该看起来像这个图像。

enter image description here

所以基本上是一行两列，行的高度固定为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>

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

339949 次浏览
小开
最佳答案

你差点就成功了。但是，将 flex: 0 0 <basis>声明设置为列将防止它们增长/收缩; 并且 <basis>参数将定义列的宽度。

此外，可以使用 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>

(由于简短而省略了供应商前缀)

或者，如果您可以改变您的标记，例如用一个额外的 <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>

(由于简短而省略了供应商前缀)

小开

这是从上面复制过来的，但是稍微压缩了一下，用语义术语重写了一下。注意: #Container有 display: flex;和 flex-direction: column;，而每个 MDN flex 医生的列有 flex: 3;和 flex: 2;(其中“一个值，无单位数”决定 flex-grow属性)。

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

小开

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


提交答案