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>

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

1 个答案: