CSS Flexbox 是一种用于可伸缩布局的新技术。采用 Flexbox 布局，可以使容器内的元素具备了更灵活的适应性，并且可以轻松实现互联网常用布局。在设计 Web 页面的过程中，掌握 CSS Flexbox 布局是必不可少的。
什么是 CSS Flexbox 布局
CSS Flexbox 是指弹性盒子布局。该布局基于一个 Flex 容器和其中的一些 Flex 项。容器采用 Flex 布局后，它的子元素 Flex 项的排列方向、间距、尺寸都可以通过容器的属性来控制。这种布局方式更为灵活和强大，可以适应不同的屏幕尺寸和设备。此外，它还支持包裹，对齐和排序等功能。
Flex 容器和 Flex 项
Flexbox 布局中有两个重要的概念：Flex 容器和 Flex 项。
Flex 容器是指匆勉容器，在 CSS 中，通过将 display 属性设置为 flex 或 inline-flex 来创建 Flex 容器。Flex 容器中包含了一个或多个 Flex 项。
Flex 项是指 Flex 容器中的子元素。每个 Flex 项设置了不同的属性，可以控制它在 Flex 容器中的排列方式。
基本概念
在深入介绍 CSS Flexbox 布局之前，需要了解以下一些基本的概念：
- 主轴：Flex 容器的主轴是指 Flex 项排列的方向，可以是水平方向（row）或垂直方向（column）
- 交叉轴：与主轴垂直的方向就是交叉轴
- Flex 项的尺寸：Flex 项可以设置 width、height、padding、margin、border 等尺寸属性
- Flex 项的排列方式：Flex 项在主轴和交叉轴上的排列方式可以通过容器的属性来控制
容器属性
Flex 容器的属性用于控制其中 Flex 项的排列方式。
display
Flexbox 布局的第一步是将容器设置为 Flex 容器。通过将 display 属性设置为 flex 或 inline-flex 来定义 Flex 容器。
---------- - -------- ----- -
flex-direction
flex-direction 属性用于控制 Flex 项在主轴上的排列方式，可以是 row（默认）、row-reverse、column 或 column-reverse。这个属性决定了 Flex 项的排列方向。
---------- - -------- ----- --------------- ------------ -
flex-wrap
默认情况下，Flex 项都在一行中排列。flex-wrap 属性用于设置 Flex 项是否换行。可以设置为 nowrap（默认，不换行）或 wrap（换行）。
---------- - -------- ----- ---------- ----- -
justify-content
justify-content 属性用于控制 Flex 项在主轴上的对齐方式。可以设置为 flex-start（默认，左对齐）、flex-end（右对齐）、center（居中）、space-between（两端对齐）、space-around（元素之间有更多的空白）或 space-evenly（元素之间分配相同数量的额外空白）。
---------- - -------- ----- ---------------- ------- -
align-items
align-items 属性用于控制 Flex 项在交叉轴上的对齐方式。可以设置为 flex-start（交叉轴起点对齐）、flex-end（交叉轴终点对齐）、center（居中对齐）、baseline（基线对齐）或 stretch（默认，占满整个容器高度）。
---------- - -------- ----- ------------ ------- -
align-content
align-content 属性用于控制多行 Flex 项在交叉轴上的对齐方式。如果 Flex 容器只有一行，则该属性无效。可以设置为 flex-start、flex-end、center、space-between、space-around 或 stretch。
---------- - -------- ----- ---------- ----- -------------- -------------- -
项目属性
Flex 项的属性用于控制元素在 Flex 容器中的排列方式。
flex-basis
flex-basis 属性用于设置 Flex 项在主轴上的尺寸，默认值为 auto。可以设置为像素、百分比、em 或自动。
----- - ----------- ------ -
flex-grow
flex-grow 属性指定是否让 Flex 项在主轴方向上和相邻项一样扩展。如果所有项都设置了 flex-grow，则它们将等分剩余的空间。
----- - ---------- -- -
flex-shrink
flex-shrink 属性指定是否让 Flex 项在主轴方向上和相邻项一样缩小。如果所有项都设置了 flex-shrink，则它们将等比缩小。
----- - ------------ -- -
flex
flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的缩写。默认值为 0 1 auto。
----- - ----- -- -
align-self
align-self 属性指定 Flex 项在交叉轴上的对齐方式。可以与 align-items 不同。
----- - ----------- ------- -
实例
下面是一个基于 CSS Flexbox 布局的实例：
------
------
-------
---------- -
-------- -----
--------------- ----
---------------- -------
------------ -------
-------------- -------
------- ------
----------------- --------
-
----- -
----- --
------- -----
----------- -------
----------------- -----
------- --- ----- -----
----------- --- --- --- -----
-
----------------- -
----------------- --------
------ -----
-
--------
-------
------
---- ------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
------
-------
-------
以上是一个简单的 Flex 容器，其中的 Flex 项都设置了相同的 flex 属性。因此，它们平均分配 Flex 容器的宽度空间。这个例子中，Flex 容器在水平和垂直方向都居中对齐。
总结
CSS Flexbox 布局是一种强大和灵活的布局方式，可以轻松实现互联网常用布局。通过掌握 Flex 容器和 Flex 项的属性，我们可以向 Web 页面添加更多有用的功能并使其更有适应性。掌握 CSS Flexbox 布局需要多次实践，希望本文能够作为你学习 Flexbox 布局的良好资料。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6502c11695b1f8cacdffa376