引言
CSS Flexbox 是一种布局方式，可用于制作响应式设计和快速创建弹性容器。在这篇文章中，我们将详细介绍 Flexbox 布局的常用属性，包括其作用、用法以及如何在实际项目中使用。
Flexbox 概述
Flexbox 犹如一种容器，它可以容纳从一个到多个 flex 项（flex item），然后自动调整每一个 flex 项的大小和位置。Flexbox 布局包含两个主要组成部分：容器和该容器内的一或多个 flex 项。
弹性容器（Flex Container）属性
display: flex或display: inline-flex：设置一个元素为弹性容器。flex-direction：指定 flex 项的排列方向（水平/垂直）。flex-wrap：控制多个 flex 项是否应在同一行内显示。flex-flow：是flex-direction和flex-wrap的缩写。justify-content：控制 flex 项在主轴上的对齐方式。align-items：控制 flex 项在交叉轴上的对齐方式。align-content：控制容器内所有 flex 项在交叉轴上的对齐方式（仅在多行 flex 容器中使用）。
弹性项目（Flex Item）属性
order：设置 flex 项的显示顺序。flex-grow：控制 flex 项的扩展比例，以填充父容器的剩余空间。flex-shrink：控制 flex 项在缩放时的收缩比例。flex-basis：在 flex 项未定宽度时，设置项目的基础宽度。flex：是flex-grow、flex-shrink和flex-basis的缩写。align-self：单独控制一个 flex 项在交叉轴上的对齐方式。
Flexbox 示例代码
-- -------------------- ---- -------
-------
--------------- -
-------- -----
---------- -----
---------------- -------
-
---------- -
----------------- --------
------ -----
------- --- ----- -----
-------- -----
------- -----
------ ------
------- ------
----------- -------
-
----------------------- - ------ -- -
----------------------- - ------ -- -
----------------------- - ------ -- -
----------------------- - ----- - - ----- -
----------------------- - ----- - - ------ -
--------
---- -----------------------
---- -------------------- ----- -------
---- -------------------- ----- -------
---- -------------------- ----- -------
---- -------------------- ----- - - ----------
---- -------------------- ----- - - -----------
------结论
虽然 CSS Flexbox 布局相对较新，但它已成为了设计响应式布局和快速创建弹性容器的强大工具。掌握其常用属性，包括弹性容器和弹性项目的所有属性，实际应用于您的项目中，将有助于缩短重复样式的开发时间且有效提高性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6720ac262e7021665e0359b8