前端必学必会：Flex Box布局语法-属性学习攻略

╰+哭是因爲堅強的太久メ 2022-09-14 11:27 174阅读 0赞

![5b185540f093d09eaa2144a77c6f2a90.png][]

# 前言 #

Flex Box（Flexible Box），即 “弹性布局”，是目前前端开发最常用的布局方案。本文主要提供一份Flex Box布局语法-属性大全：

*  布局概念
 *  容器常用属性
 *  容器成员常用属性
 *  实操演示Demo

--------------------

# 布局概念 #

*  容器(Container)：采用Flex布局的元素
 *  容器成员(Item)：Flex布局里的子元素
 *  主轴(main axis)：容器默认的水平横轴
 *  交叉轴(cross axis)：容器默认的垂直纵轴

![5fcb27e0adc0517e0dc61d332afb22d6.png][]

通过**属性设置元素**来展示UI布局是使用Flex Box布局的核心用法，下面将主要讲解 容器 跟 容器成员的属性设置。

--------------------

# 容器属性 #

容器的常用属性主要包括：

*  flexDirection：容器成员的排列方向
 *  justifyContent：容器成员在主轴上的对齐方式
 *  alignItems：容器成员在交叉轴上的对齐方式
 *  alignContent：多根轴线的对齐方式
 *  flexWrap：容器成员在轴线方向排列不下时的换行方式

### 1. flexDirection：容器成员的排列方向 ###

![ec05aad8afc4099d8a945cea3f8f0406.png][]

### 2. justifyContent：容器成员在主轴上的对齐方式 ###

![56bef462a0ba90f9b3da2bcfa9841246.png][]

### 3. alignItems：容器成员在交叉轴上的对齐方式 ###

![7e5b5d5e904f75cb4b8c6fbc4733d1fd.png][]

### 4. alignContent：多根轴线的对齐方式 ###

> 多根轴线的对齐方式(若只有一根轴线，则不起作用)

![ed4f1b36640498ff9ed99e002b432022.png][]

### 5. flexWrap：容器成员在轴线方向排列不下时的换行方式 ###

![d241c4a3af9a3a47c0c17ccb76f1ebb4.png][]

\#\#\#特别说明：flexFlow属性

*  是属性flexDirection和属性flexWrap的的快捷设置方式
 *  默认值分别是：row、no\_wrap

--------------------

# 容器成员属性 #

容器成员常用的属性主要包括：

*  order：容器成员的排列顺序
 *  alignSelf：容器成员在容器的交叉轴对齐方式
 *  flexGrow：空间剩余时，容器成员占剩余空间的放大比例
 *  flexShrink：空间不足时，容器成员的缩小比例
 *  flexBasis：分配多余空间前，容器成员占据的主轴空间（即横向方向的）
 *  flex：属性flexGrow、flexShrink 和 flexBasis的快捷设置方式

### 1. order：容器成员的排列顺序 ###

*  数值越小，排列越靠前
 *  默认为0

![55a86dfb2a4688ea158f64d818ec425f.png][]

### 2. alignSelf：容器成员在容器的交叉轴对齐方式 ###

*  默认值：auto，即继承容器的alignItems属性；若无父元素，则为stretch(占满高度)
 *  单独设置即覆盖容器的alignItems属性，设置属性跟alignItems属性完全相同

![3c0c17216640ea9c0ae4db0d12166684.png][]

### 3. flexGrow：空间剩余时，容器成员占剩余空间的放大比例 ###

![946906f579c9d8f5b55baecac989bfe9.png][]

### 4. flexShrink：空间不足时，容器成员的缩小比例 ###

![72d2fafad6e3f3395cbf86741081ec46.png][]

### 5. flexBasis：分配多余空间前，容器成员占据的主轴空间（即横向方向的） ###

*  即系统会先减去这部分固定空间(即上面计算公式里的“固定空间”)，再去计算容器的剩余空间；
 *  默认值：容器成员本身大小。

### 特别说明：flex属性 ###

是属性flexGrow、flexShrink 和 flexBasis的快捷设置方式

*  默认值：0、1、auto
 *  快捷属性1：auto (1、1、auto)
 *  快捷属性2：none (0、0、auto)

至此，关于Flex Box布局常用属性讲解完毕。

--------------------

# 实操演示 #

此处推荐一个Demo网站：[https://yogalayout.com/playground][https_yogalayout.com_playground]，设置属性即可快速预览，方便：

*  更好的理解各种FlexBox布局的属性
 *  开发时进行快速预览

![968e7691bb3f2047bf1475a927a75e10.png][]

--------------------

# 总结 #

![5658be8fb4695330c9b5ddaa103f4615.png][]

--------------------

# 欢迎关注[Carson\_Ho][Carson_Ho]的CSDN博客 #

不定期分享关于**技术**干货，追求**短、平、快**，但**却不缺深度**。

--------------------

# 请点赞！因为你的鼓励是我写作的最大动力！ #

[5b185540f093d09eaa2144a77c6f2a90.png]: /images/20220828/2e51d084c3a04d25914049a4bc5f021c.png
[5fcb27e0adc0517e0dc61d332afb22d6.png]: /images/20220828/2d32bd852bc84a27b58a18034d438c72.png
[ec05aad8afc4099d8a945cea3f8f0406.png]: /images/20220828/ae8a754e4956471f92f87f93b9f5a942.png
[56bef462a0ba90f9b3da2bcfa9841246.png]: /images/20220828/e512d710949846c1927a7c2f53e87f46.png
[7e5b5d5e904f75cb4b8c6fbc4733d1fd.png]: /images/20220828/870fcc5225154ba1ad8cba0f48b3ad2c.png
[ed4f1b36640498ff9ed99e002b432022.png]: /images/20220828/33acc2de7c2f4a038f878c0f19450468.png
[d241c4a3af9a3a47c0c17ccb76f1ebb4.png]: /images/20220828/ab5973f2ae12437681724372fcda6622.png
[55a86dfb2a4688ea158f64d818ec425f.png]: /images/20220828/77d279b916f14c93954ef1c41fba2425.png
[3c0c17216640ea9c0ae4db0d12166684.png]: /images/20220828/4ff17e185c0345e88a95cf4a1db81986.png
[946906f579c9d8f5b55baecac989bfe9.png]: /images/20220828/e5b7062b88364bd9a7850a30b78b7909.png
[72d2fafad6e3f3395cbf86741081ec46.png]: /images/20220828/b74574a1271b434b92466639527e9a95.png
[https_yogalayout.com_playground]: https://yogalayout.com/playground
[968e7691bb3f2047bf1475a927a75e10.png]: /images/20220828/e88b94953e94426b90d8f6491dc2dd59.png
[5658be8fb4695330c9b5ddaa103f4615.png]: /images/20220828/6ede62304fc840e5a6f9d3b3755ef698.png
[Carson_Ho]: https://blog.csdn.net/carson_ho