什么是 Flexbox?
Flexbox 是一种布局方式，可以用于在容器中自动对齐和分配空间。它提供了一种更加灵活、强大而且简洁的布局方式，比传统的 CSS 布局方式更加高效。
Flexbox 的主要概念
容器和项目
在 Flexbox 中，有两个主要的概念：容器和项目。Flexbox 的布局是建立在这两个概念之上的。
容器是包含了一组项目的父元素。项目是容器的直接子元素。在 Flexbox 布局中，容器会为项目提供一个虚拟的“坐标系”，来控制项目的位置和尺寸。
主轴和交叉轴
在 Flexbox 中，有两个重要的轴：主轴和交叉轴。
主轴是指与项目排列方向一致的轴，一般情况下是水平方向或者垂直方向。
交叉轴是指与项目排列方向垂直的轴，一般情况下与主轴垂直。
父元素的属性
在 Flexbox 布局中，父元素（即容器）的属性用来控制其子元素（即项目）的排列方式和分配空间。下面是一些常用的父元素属性：
display: flex;：将一个块级元素定义为 Flexbox 容器。flex-direction: row/column;：定义主轴的方向，即项目的排列方向。flex-wrap: nowrap/wrap/wrap-reverse;：定义项目如何换行。justify-content: flex-start/flex-end/center/space-between/space-around;：定义项目在主轴上的对齐方式。align-items: flex-start/flex-end/center/baseline/stretch;：定义项目在交叉轴上的对齐方式。align-content: flex-start/flex-end/center/space-between/space-around/stretch;：定义多行项目在交叉轴上的对齐方式。
子元素的属性
在 Flexbox 布局中，子元素（即项目）的属性用来控制它们在父元素中的位置和尺寸。下面是一些常用的子元素属性：
flex-grow: number;：定义项目的放大比例。flex-shrink: number;：定义项目的缩小比例。flex-basis: length/initial/auto;：定义项目的基础大小。flex: none/number/initial/auto;：定义项目的缩放比例、基础大小和是否收缩等属性。order: number;：定义项目的排列顺序。
Flexbox 实践示例
HTML 代码：
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
CSS 代码：
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ---- ---------------- -------------- ------------ ------- - ----- - ----------- ---- ------- --- ----- ----- ----------- ------- -
在这个示例中，我们将 container 元素定义为 Flexbox 容器，并设置了一些父元素属性，用来控制项目在容器中的排列和对齐方式。同时，我们也设置了一些子元素属性，用来控制项目的大小和样式。
通过这个示例，我们可以看到如何使用 Flexbox 布局实现一个基本的三列布局。
总结
以上就是 CSS3 Flexbox 布局的常用语法。相信大家已经对 Flexbox 有了初步的了解。在实际应用中，Flexbox 可以大大提高开发效率，同时也使得布局变得更加灵活和精准。因此，掌握它的相关知识是非常有必要的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f99f6df6b2d6eab3118097