css - CSS Flex Box布局:全 Angular 行和列

各位程序员大家好!

我有一个简单的框布局，我想使用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() 表达式相对于标题的高度指定列的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>

(由于简洁，省略了供应商前缀)