你几乎完成了然而,将

flex: 0 0 声明设置到列将阻止它们增长/缩小;而

参数将定义列的宽度.

另外,您可以使用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>元素,将不会使用calc()实现如下：

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

}

(由于简洁而忽略了供应商前缀)