CSS Flex Box布局：全角行和列 [英] CSS Flex Box Layout: full-width row and columns

问题描述

你好的程序员你好！

我有一个简单的盒子布局，我想使用flexbox实现，但我根本不能弄清楚。应该看起来像这张图片。

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.

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

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:

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

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

推荐答案

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

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.

此外，您可以使用CSS3 calc（） 表达式指定 height

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

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

如果你可以改变你的标记例如用一个额外的< div> 元素包装列，不使用 calc（）

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

这篇关于CSS Flex Box布局：全角行和列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！