时间戳

首页 > 解决方案 > 如何使用 flexbox 制作灵活的 2x3 网格

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

问题描述

我正在尝试创建一个 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>

标签： htmlcssflexboxalignment

解决方案

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

推荐阅读