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

Posted 2023-03-05

【中文标题】如何使用 flexbox 制作灵活的 2x3 网格

【英文标题】：How to make a flexible 2x3 grid using flexbox

【发布时间】：2019-09-08 07:43:46

【问题描述】：

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

【参考方案1】：

使outer 包装器成为列弹性盒：

将flex: 1添加到每个row，以便行共享垂直空间，

将flex: 1添加到每个item，使列共享水平空间，

在body 和html 元素上完成height: 100%（您也可以使用视口高度 设置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>