CSS弹性布局 Flex属性

flex是Flexible Box的缩写，就是弹性盒子布局的意思

通过flex我们可以解决元素居中问题，自动弹性伸缩，适配不同大小的屏幕和移动端。

Flex布局简介

序号	简记	术语
1	二成员	容器和项目(container / item)
2	二根轴	主轴与交叉轴(main-axis / cross-axis)
3	二根线	起始线(main/cross-start)与结束线（main/cross-end)

 

容器的属性

 以下6个属性设置在容器上

• flex-direction     主轴方向
• flex-wrap           主轴一行满了换行
• flex-flow            flex-direction和flex-wrap的组合
• justify-content   主轴元素对齐方式
• align-items        交叉轴元素对齐方式 //单行
• align-content     交叉轴行对齐方式 //多行

1. flex-direction 主轴方向

序号	属性值	描述
1	row 默认值	主轴水平: 起始线居中,项目从左到右显示
2	row-reverse	主轴水平:起始线居右, 项目从右向左显示
3	column	主轴垂直: 起始线居上,项目从上向下显示
4	column-reverse	主轴垂直: 起始线居下,项目从下向上显示

2.flex-wrap 主轴一行满了换行

序号	属性值	描述
1	nowrap 默认值	项目不换行: 单行容器
2	wrap	项目换行: 多行容器,第一行在上方
3	wrap-reverse	项目换行: 多行容器,第一行在下方

3.flex-flow

flex-flow是flex-direction和flex-wrap的简写

flex-flow：flex-direction flex-wrap

4.justify-content 主轴元素对齐方式

序号	属性值	描述
1	flex-start 默认	所有项目与主轴起始线对齐
2	flex-end	所有项目与主轴终止线对齐
3	center	所有项目与主轴中间线对齐: 居中对齐
4	space-between	两端对齐: 剩余空间在头尾项目之外的项目间平均分配
5	space-around	分散对齐: 剩余空间在每个项目二侧平均分配
6	space-evenly	平均对齐: 剩余空间在每个项目之间平均分配

5. align-items    item在交叉轴上对齐方式

• 该属性仅适用于：单行容器
• 当容器中交叉轴方向上存在剩余空间时, 该属性才有意义

序号	属性值	描述
1	flex-start 默认	与交叉轴起始线对齐
2	flex-end	与交叉轴终止线对齐
3	center	与交叉轴中间线对齐: 居中对齐

6. align-content  交叉轴行对齐方式  多行

该属性仅适用于：多行容器

多行容器中，交叉轴会有多个项目，剩余空间在项目之间分配才有意义

序号	属性值	描述
1	stretch 默认	项目拉伸占据整个交叉轴
2	flex-start	所有项目与交叉轴起始线(顶部)对齐
3	flex-end	所有项目与交叉轴终止线对齐
4	center	所有项目与交叉轴中间线对齐: 居中对齐
5	space-between	两端对齐: 剩余空间在头尾项目之外的项目间平均分配
6	space-around	分散对齐: 剩余空间在每个项目二侧平均分配
7	space-evenly	平均对齐: 剩余空间在每个项目之间平均分配

项目的属性

以下6个属性设置在项目上

order 排序

flex-grow    放大

flex-shrink  缩小

flex-basis    有效宽度

flex

align-self     覆盖 container align-items 属性

1. order 

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

2. flex-grow

在容器主轴上存在剩余空间时，flex-grow才有意义

序号	属性值	描述
1	0 默认值	不放大,保持初始值
2	initial	设置默认值,与0等效
3	n	放大因子: 正数

3. flex-shrink

当容器主轴“空间不足”且“禁止换行”时，flex-shrink才有意义

序号	属性值	描述
1	1 默认值	允许项目收缩
2	initial	设置初始默认值,与 1 等效
3	0	禁止收缩,保持原始尺寸
4	n	收缩因子: 正数

4. flex-basis

取值：默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会比width属性高，因此会覆盖widtn属性

5. flex

取值：默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度

该属性有两个快捷键值，分别是auto(1 1 auto)等分放大缩小，与none(0 0 auto)不放大不缩小

6. align-self

该属性可覆盖容器的align-items，用以自定义某个项目的对齐方式

序号	属性值	描述
1	auto 默认值	继承 align-items 属性值
2	flex-start	与交叉轴起始线对齐
3	flex-end	与交叉轴终止线对齐
4	center	与交叉轴中间线对齐: 居中对齐
5	stretch	在交叉轴方向上拉伸
6	baseline	与基线对齐(与内容相关用得极少)