引言
在网页布局中，往往需要把页面内容分成多个区域，并使这些区域在不同大小的屏幕上以一定的比例自适应布局。实现这种方式的一种常见方法是网格布局方式。在 HTML 和 CSS 中，实现网格布局有很多种方法，但是在本文中，我们将着重介绍 Flexbox。
Flexbox 是一种 CSS 布局模式，支持自适应缩放，并能快速创建复杂布局。Flexbox 不仅可以用来创建水平、垂直居中的布局还可以创建出网格布局。
本文将介绍如何使用 Flexbox 实现网格布局方式。
Flexbox 网格布局
在传统的 CSS 布局中，使用 float 或 position 等属性进行布局。但是随着页面变得越来越复杂，这种方式已经无法满足现代网页的需求。Flexbox 可以创建出网格布局，可以完成传统布局方式不能完成的复杂布局。
首先，我们需要给网格容器设置 display: flex，来激活 flexbox。
.container {
display: flex;
}1. 等高布局
等高布局就是所有网格的高度是一样的。在 Flexbox 中通过设置 flex 能够实现，如下：
.container {
display: flex;
}
.item {
flex: 1;
}在 .item 中设置 flex: 1，就可以让所有的 .item 容器等分 .container 容器的大小。
2. 不等高布局
在 Flexbox 中也能够实现不等高的网格布局，如下：
-- -------------------- ---- ------- ---------- - -------- ----- - ----- - ---------- -- ------- ----- - ------------------ - ----------- ---- - ------------------ - ----------- ---- - ------------------ - ----------- ---- -
在 .item 中设置 flex-grow: 1 使所有 .item 容器等分 .container 容器的大小。在 .item:nth-child 中通过 flex-basis 来分配容器的大小比例。
3. 不规则网格布局
Flexbox 可以创建出一些既不等高，又不规则的网格布局。实现方式是将每个子盒子按照需要展示的位置进行排放即可。
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- - ----- - ------------- ----- -------------- ----- - ------------------ - ------ ---- ------- ------ - ------------------ - ------ ---- ------- ------ ------------- ---- - ------------------ - ------ ---- ------- ------ - ------------------ - ------ ---- ------- ------ - ------------------ - ------ -------- - ------ ------- ------ - ------------------ - ------ -------- - ------ ------- ------ -
在.flex-wrap: wrap 的前提下，对每个子盒子进行宽度和高度的设置，并指定每个子盒子在容器中所放的位置。
结论
在本文中，我们介绍了如何使用 Flexbox 实现网格布局方式。Flexbox 不仅可以实现传统布局方式不能完成的复杂布局，而且还能够通过灵活的设置，完成不同形态的网格布局。在网页前端开发中，掌握 Flexbox 的使用方法，不仅可以提高开发效率，还能让网页更加美观。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6750f096050cf9039c17f973