什么是 CSS Flexbox？
CSS Flexbox 是一种新的布局方式，可以让我们更轻松地实现复杂的布局效果。它的全称是 CSS Flexible Box Layout，意为 CSS 弹性盒子布局。使用 Flexbox 后，我们可以在 CSS 中以更加自然的方式布置我们的 HTML 元素。
Flexbox 的基础知识
在使用 Flexbox 布局之前，我们需要了解一些基本概念：
- Flex Container （弹性容器）：想要使用 Flexbox 布局，需要将元素的父元素设置为弹性容器。
- Flex Items （弹性子元素）：在弹性容器中，通过 display: flex 或 display: inline-flex 将元素设置为弹性子元素。
- Flex 模型：主轴和交叉轴，在弹性容器中元素沿着主轴和交叉轴排列。
CSS Flexbox 实现单元格布局的步骤
1. 弹性容器设置
首先，我们需要将父元素设置为弹性容器。在 CSS 中，我们可以通过 display 属性来实现：
.container {
display: flex;
}2. 弹性子元素设置
然后，我们需要将子元素设置为弹性子元素，并通过 flex 属性来控制它们的布局位置。在本例子中，我们希望子元素按照行（row）的方式排布，因此我们需要将 flex-direction 属性设置为 row。
.container {
display: flex;
flex-direction: row;
}3. 子元素排列方式设置
在弹性容器中，元素沿着主轴和交叉轴排列。因此，在我们的布局中，需要定义主轴和交叉轴的排列方式。在本例子中，我们想要子元素在主轴上以相同的长度排列，因此我们需要将子元素的 flex 属性设为相同的值：
.container {
display: flex;
flex-direction: row;
}
.container .item {
flex: 1;
}4. 完整代码实现
最终的代码将会像这样：
-- -------------------- ---- -------
--------- -----
------
------
-------------- ------------
-------
---------- -
-------- -----
--------------- ----
-
---------- ----- -
----- --
----------- -----
------- ----
-------- -----
----------- -------
-
--------
-------
------
---- ------------------
---- ---------------- -------
---- ---------------- -------
---- ---------------- -------
------
-------
-------总结
CSS Flexbox 是一种强大的布局方式，可以让我们以更加自然的方式布置 HTML 元素。在本文中，我们介绍了如何使用 Flexbox 布局实现单元格式的页面布局，包括弹性容器设置、弹性子元素设置、子元素排列方式设置。通过掌握这些基本知识，并且结合实际应用，可以让我们更好地使用 Flexbox 实现复杂的页面布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6453a6c8968c7c53b07eba3b