前言
Flex Box（Flexible Box），即 "弹性布局"，是目前前端开发最常用的布局方案。本文主要提供一份Flex Box布局语法-属性大全：
- 布局概念
- 容器常用属性
- 容器成员常用属性
- 实操演示Demo
布局概念
- 容器(Container)：采用Flex布局的元素
- 容器成员(Item)：Flex布局里的子元素
- 主轴(main axis)：容器默认的水平横轴
- 交叉轴(cross axis)：容器默认的垂直纵轴
通过属性设置元素来展示UI布局是使用Flex Box布局的核心用法，下面将主要讲解 容器 跟 容器成员的属性设置。
容器属性
容器的常用属性主要包括：
- flexDirection：容器成员的排列方向
- justifyContent：容器成员在主轴上的对齐方式
- alignItems：容器成员在交叉轴上的对齐方式
- alignContent：多根轴线的对齐方式
- flexWrap：容器成员在轴线方向排列不下时的换行方式
1. flexDirection：容器成员的排列方向
2. justifyContent：容器成员在主轴上的对齐方式
3. alignItems：容器成员在交叉轴上的对齐方式
4. alignContent：多根轴线的对齐方式
多根轴线的对齐方式(若只有一根轴线，则不起作用)
5. flexWrap：容器成员在轴线方向排列不下时的换行方式
特别说明：flexFlow属性
- 是属性flexDirection和属性flexWrap的的快捷设置方式
- 默认值分别是：row、no_wrap
容器成员属性
容器成员常用的属性主要包括：
- order：容器成员的排列顺序
- alignSelf：容器成员在容器的交叉轴对齐方式
- flexGrow：空间剩余时，容器成员占剩余空间的放大比例
- flexShrink：空间不足时，容器成员的缩小比例
- flexBasis：分配多余空间前，容器成员占据的主轴空间（即横向方向的）
- flex：属性flexGrow、flexShrink 和 flexBasis的快捷设置方式
1. order：容器成员的排列顺序
- 数值越小，排列越靠前
- 默认为0
2. alignSelf：容器成员在容器的交叉轴对齐方式
- 默认值：auto，即继承容器的alignItems属性；若无父元素，则为stretch(占满高度)
- 单独设置即覆盖容器的alignItems属性，设置属性跟alignItems属性完全相同
3. flexGrow：空间剩余时，容器成员占剩余空间的放大比例
4. flexShrink：空间不足时，容器成员的缩小比例
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，设置属性即可快速预览，方便：
- 更好的理解各种FlexBox布局的属性
- 开发时进行快速预览
总结
欢迎关注Carson_Ho的简书
不定期分享关于技术干货，追求短、平、快，但却不缺深度。
