什么是 Flexbox？
Flexbox 是一种 CSS 布局模式，它可以让我们更加轻松地创建灵活的、响应式的布局。Flexbox 可以让我们通过设置容器和其内部元素的属性来实现各种布局效果，比如水平居中、垂直居中、等分布局、流式布局等等。
Flexbox 的基本概念
在使用 Flexbox 之前，我们需要先了解一些基本概念：
- 容器（Container）：包含 Flexbox 布局的外层元素，也称为 Flex 容器。
- 项目（Item）：容器内部的元素，也称为 Flex 项目。
- 主轴（Main Axis）：容器的主要方向，通常是水平方向（从左到右）或垂直方向（从上到下）。
- 交叉轴（Cross Axis）：与主轴垂直的方向。
- 主轴起点（Main Start）：主轴的起始位置。
- 主轴终点（Main End）：主轴的结束位置。
- 交叉轴起点（Cross Start）：交叉轴的起始位置。
- 交叉轴终点（Cross End）：交叉轴的结束位置。
Flexbox 的属性
Flexbox 有很多属性，这里介绍一些常用的属性：
容器属性
display：设置容器为 Flex 布局。flex-direction：设置主轴的方向。justify-content：设置主轴上的对齐方式。align-items：设置交叉轴上的对齐方式。flex-wrap：设置容器内项目的换行方式。align-content：设置多行项目在交叉轴上的对齐方式。
项目属性
order：设置项目的排列顺序。flex-grow：设置项目的放大比例。flex-shrink：设置项目的缩小比例。flex-basis：设置项目的基准大小。flex：设置项目的flex-grow、flex-shrink和flex-basis属性。align-self：设置项目在交叉轴上的对齐方式。
Flexbox 的实际应用
实现水平居中
---- ------------------ ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ------
---------- - -------- ----- ---------------- ------- -
实现垂直居中
---- ------------------ ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ------
---------- - -------- ----- ------------ ------- -
实现等分布局
---- ------------------ ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ------
---------- - -------- ----- - ----- - ----- -- -
实现流式布局
---- ------------------ ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ------
---------- - -------- ----- ---------- ----- - ----- - ----- - - ------ -
总结
Flexbox 是一种强大的 CSS 布局模式，它可以让我们更加轻松地创建灵活的、响应式的布局。掌握 Flexbox 的基本概念和常用属性，可以让我们在实际开发中更加高效地管理布局。同时，我们也需要注意兼容性问题，尽可能使用浏览器支持的 Flexbox 属性，或者使用 polyfill 进行兼容性处理。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/657e1e2bd2f5e1655d8f2b6e