你好同程序员！
我有一个简单的盒子布局,我希望实现使用flexBox,但我根本无法弄清楚.它应该看起来像这个图像.
所以基本上是一排和两列,行被固定在让我们说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.
解决方法
你几乎完成了然而,将
flex: 0 0 <basis>声明设置到列将阻止它们增长/缩小;而
<basis>参数将定义列的宽度.
另外,您可以使用CSS3 calc()表达式来指定相对于标题高度的列的高度.
#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>
(由于简洁而忽略了供应商前缀)
