如何使用flexbox制作灵活的2x3网格

Question

我正在尝试创建一个HTML页面，每个页面包含3行，每行2个单元格。我希望所有6个单元格均匀地填充整个页面，而不必指定高度，以便在重新调整浏览器大小时，单元格也是如此。

我正在尝试使用以下flex布局，但我将它们全部连接起来。

.outer {
  display: flex;
  min-height: 100%;
}

.row {
  border: 1px solid blue;
  display: flex;
  flex: 1.0;
  flex-grow: 1.0;
}

.item {
  background-color: orange;
  flex: .5;
  flex-grow: 0.5;
  border: 1px solid red;
}

<div class="outer">
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

Answer 1

使outer包装器成为列flexbox：

• 将flex: 1添加到每个row，以便行共享垂直空间，
• 将flex: 1添加到每个item，以便列共享水平空间，
• 在height: 100%和body元素上完成了html（你也可以使用视口高度来设置min-height）并将默认的body边距设置为零。

见下面的演示：

body, html {
  margin: 0;
  height: 100%;
}

.outer {
  display: flex;
  min-height: 100%;
  flex-direction: column; /* added */
}

.row {
  border: 1px solid blue;
  display: flex;
  flex: 1; /* added */
}

.item {
  background-color: orange;
  border: 1px solid red;
  flex: 1; /* added */
}

<div class="outer">
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>