什么是 Flexbox 布局？
Flexbox 是一种用于布局的 CSS3 模块，它可以轻松地实现响应式布局，使得页面元素在不同屏幕尺寸下能够自适应地排列。它的全称是 Flexible Box Layout，意为弹性布局。
Flexbox 布局的特点是灵活性和自适应性。它可以让元素在容器中的分布更加灵活，可以轻松地实现元素的水平和垂直居中、等高布局等常见布局需求。
Flexbox 布局的基本概念
在了解 Flexbox 布局之前，需要先了解一些基本概念：
- Flex Container（容器）： 容器是指应用 Flexbox 布局的元素，它的
display属性值为flex或inline-flex。 - Flex Item（项目）： 项目是指容器内被应用 Flexbox 布局的元素，它们的布局是基于容器的。
- Main Axis（主轴）： 主轴是指容器的主要方向，可以是水平方向或垂直方向。默认情况下，主轴是水平方向，即
flex-direction: row。 - Main Start / Main End（主轴起点 / 主轴终点）： 主轴起点是指容器内项目的起点，主轴终点是指容器内项目的终点。在默认情况下，主轴起点在左侧，主轴终点在右侧（即从左到右排列）。
- Cross Axis（交叉轴）： 交叉轴是指与主轴垂直的方向。默认情况下，交叉轴是垂直方向，即
flex-direction: row。 - Cross Start / Cross End（交叉轴起点 / 交叉轴终点）： 交叉轴起点是指容器内项目的起点，交叉轴终点是指容器内项目的终点。在默认情况下，交叉轴起点在顶部，交叉轴终点在底部（即从上到下排列）。
Flex Container 的属性
下面是一些常用的 Flex Container 属性：
display
设置元素为 Flex Container。
---------- - -------- ----- -
flex-direction
设置主轴方向。
---------- - --------------- ---- -- ----------- --------------- ------- -- ---- -- -
flex-wrap
设置项目是否换行。
---------- - ---------- ------- -- ---------- ---------- ----- -- -- -- ---------- ------------- -- ---- -- -
justify-content
设置项目在主轴上的对齐方式。
---------- - ---------------- ----------- -- ------- -- ---------------- --------- -- --- -- ---------------- ------- -- ---- -- ---------------- -------------- -- -------------- -- ---------------- ------------- -- ----------- -- ---------------- ------------- -- --------- -- -
align-items
设置项目在交叉轴上的对齐方式。
---------- - ------------ -------- -- -------- -- ------------ ----------- -- ---- -- ------------ --------- -- ---- -- ------------ ------- -- ---- -- ------------ --------- -- ---- -- -
align-content
设置多行项目在交叉轴上的对齐方式。
---------- - -------------- -------- -- -------- -- -------------- ----------- -- ---- -- -------------- --------- -- ---- -- -------------- ------- -- ---- -- -------------- -------------- -- -------------- -- -------------- ------------- -- ----------- -- -------------- ------------- -- --------- -- -
Flex Item 的属性
下面是一些常用的 Flex Item 属性：
flex-grow
设置项目的放大比例。
----- - ---------- -- -- ---- ----- -- -
flex-shrink
设置项目的缩小比例。
----- - ------------ -- -- ---- ----- -- -
flex-basis
设置项目的基准大小。
----- - ----------- ----- -- ------------ -- ----------- ------ -- ---- -- ----------- ---- -- ---- -- -
flex
是 flex-grow、flex-shrink 和 flex-basis 的缩写。
----- - ----- - - ----- -- --- -- ----- - - ----- -- ---- -- -
order
设置项目的排列顺序。
----- - ------ -- -- ------------ -- ------ -- -- ---- -- -
Flexbox 布局的示例代码
下面是一个简单的 Flexbox 布局示例代码：
---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ------
---------- - -------- ----- ---------------- ------- ------------ ------- ------- ------ - ----- - ----- -- ----------- ------- ---------- ----- ----------------- ----- ------- - ----- -
这个示例代码实现了三个项目在水平方向上居中对齐，并且在垂直方向上也居中对齐。每个项目的大小相等，间隔为 1rem。在不同屏幕尺寸下，这个布局可以自适应地调整。
总结
Flexbox 布局是一种非常实用的 CSS 布局方式，它可以轻松地实现响应式布局和常见布局需求。掌握了 Flexbox 布局的基本概念和常用属性，就可以轻松地应对各种布局需求。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66384cdcd3423812e464e959