前言
网格布局在前端开发中十分常用，可以帮助我们实现多列布局、响应式布局、等高布局等。以前的实现方式有float，但是其有很多问题，如难以实现等高布局、浮动元素会破坏文档流等。而使用 Flexbox 可以很好地解决这些问题，本文将重点介绍如何使用 Flexbox 实现网格布局。
Flexbox 简介
Flexbox 是一种新的布局方式，用于实现排列方式和空间分配，在灵活性和自适应性方面比传统的块级元素布局更好。Flexbox 可以让元素在自己的容器内自动地调整它们的大小、位置和顺序，以适应文件大小、屏幕大小和设备大小的变化。
Flexbox 核心概念
主轴和侧轴
Flexbox 布局中，容器默认有一个主轴和一个侧轴，主轴是定义在 display:flex 的容器里的。在默认情况下，主轴是水平的，即 flex-direction 属性的默认值为 row。如果更改了 flex-direction 属性的值，主轴方向就会改变，即：
flex-direction: row，主轴方向为水平方向；flex-direction: row-reverse，主轴方向为水平方向，但是方向从右到左排布；flex-direction: column，主轴方向为垂直方向；flex-direction: column-reverse，主轴方向为垂直方向，但是方向从下到上排布。
侧轴是垂直于主轴的轴线，主轴与侧轴形成了一个坐标系。在水平布局中，侧轴是垂直的，而在垂直布局中，侧轴则是水平的。
容器属性
想要使用 Flexbox 布局，必须将其定义在容器中。以下是一些常用的容器属性：
display:flex可将元素定义为 Flexbox 容器，使其内部的元素按照 Flexbox 规则排列；flex-direction定义了项目在容器中的排布方向。默认是row，即水平排布，还可以取值为column，即垂直排布、row-reverse从右往左水平排布、column-reverse从下往上垂直排布；flex-wrap控制元素在 Flexbox 容器中是否换行。默认情况下，flex容器的子元素会挤到一起。设置flex-wrap的值为wrap可以让子元素自动换行；justify-content属性决定了子元素沿着父容器的主轴线的对齐方式。默认情况下，子元素均匀地分布在主轴线上。还可以有其他值，如flex-start、flex-end、center、space-between、space-around；align-items控制子元素沿着侧轴线的对齐方式。默认情况下，子元素沿着侧轴线居中。还可以有其他值，如flex-start、flex-end、center、stretch、baseline；align-content控制多行子元素在 Flexbox 容器中的对齐方式。只有在flex-wrap:wrap时才有效果。默认情况下，多行子元素会在纵向上均匀分布。「align-content」接受的属性为「flex-start」、「flex-end」、「center」、「space-between」、「space-around」、「stretch」。
项目属性
Flexbox 容器里的每一个子元素都是一个项目，以下是一些常用的项目属性：
flex-grow用来设置子元素在容器中的分配比例，默认为0，即不分配。如果一个容器内的所有子元素的flex-grow值都是1，那么每个子元素会得到相同的额外空间；flex-shrink也用来设置子元素在容器中的分配比例。它定义了当元素不能伸缩时，空间应该如何分配。它的默认值为1，当应用于某个项目时，元素的尺寸会根据父容器的大小进行自适应。如果所有的子元素都设置了同样的flex-shrink值，且空间不足，那么所有的子元素都会收缩；flex-basis定义了项目的默认大小，它可以是一个数值，表示子元素在不同条件下的最小值。如果属性值为auto，则项目会根据它的内容自动确定它的大小；flex是flex-grow、flex-shrink和flex-basis这三个属性的缩写形式；order是改变项目的位置。默认情况下，项目按照代码的先后顺序来排列。通过指定一个正整数值，可以将项目向后移动。
实现网格布局
以一个常见的网格布局为例：
- HTML 代码
-- -------------------- ---- ------- ---- ------------------ ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ------
- CSS 代码
-- -------------------- ---- ------- ---------- - -------- ----- -- --- ------- -- -- ---------- ----- -- ---- -- ---------------- ------- -- -------- -- ------------ ------- -- -------- -- ------ ------ -- ------ -- ------- ------ -- ------ -- ------- --- ----- ----- -- ------ -- - ----- - ----------- ------ -- ------ -- ------- ------ -- ------- -- ------------ ------ -- --------------- -- ----------- ------- -- --------------- -- ---------- ----- -- ------ -- - ------- ------- ------ - ---------- -- -- ------- -- - ------- ------- ------- ------- ------- ------ - ---------- -- -- ------- -- -
- 效果预览
总结
以上就是使用 CSS Flexbox 实现网格布局的详细指导。使用 Flexbox，我们可以快速地实现各种排列方式，帮助我们完成多列布局、响应式布局、等高布局等。同时要注意的是，不同的 Flexbox 属性可以配合起来使用，以获得满足特定需求的排列效果。希望本文能够对初学者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648666d748841e98944f7cc0