flex属性练习
http://211.149.185.34:90/0409.html

flex 弹性布局学习总结

1.二个成员、二条轴、两根线

二个成员：容器与项目
二条轴：主轴与交叉轴
二根线：起始线与终止线

1.1 容器与项目

容器相当于父元素，项目相当于子元素
容器的 dispaly 属性设置为 flex 即为块级容器，内部子元素自动成为 flex 项目（常用）
容器的 dispaly 属性设置为 inline-flex 即为行内容器，内部子元素自动成为 flex 项目（非常用）

1.2 容器的 6 个属性

1.2.1 主轴方向 flex-direction

所有项目永远随主轴方向排列
主轴默认为水平方向，改变主轴的方向使用属性 flex-direction 来更改

（1）水平正向：row，水平反向：row-reverse
（2）垂直正向：column，垂直反向：column-reverse

1.2.2 主轴项目换行 flex-wrap

默认不换行，nowrap，单行容器
设置换行使用 flex-wrap 属性

（1）wrap 为正向换行，多行容器
（2）wrap-reverse 为反向换行，多行容器

1.2.3 主轴方向和项目换行的简写 flex-flow （以后只用它）

flex-flow 是属性 flex-direction 和 flex-wrap 的简写
语法: flex-flow: flex-direction flex-wrap
默认: 主轴水平、不换行，row nowrap

1.2.4 容器主轴项目对齐 justify-content

当容器中主轴方向上存在剩余空间时, 该属性才有意义
默认 flex-start，所有项目与主轴起始线对齐
其他对齐方式

（1）flex-end 所有项目与主轴终止线对齐
（2）center 所有项目与主轴中间线对齐: 居中对齐
（3）space-between 两端对齐
（4）space-around 分散对齐
（5）space-evenly 平均对齐

1.2.5 容器交叉轴项目对齐 align-items

当容器中交叉轴方向上存在剩余空间时, 该属性才有意义
默认 flex-start，所有项目与交叉轴起始线对齐
其他对齐方式

（1）flex-end 所有项目与交叉轴终止线对齐
（2）center 所有项目与交叉轴中间线对齐: 居中对齐

1.2.6 多行容器交叉轴项目对齐 align-content

该属性仅适用于: 多行容器
多行容器中, 交叉轴有剩余空间才能设置
默认 stretch，项目拉伸占据整个交叉轴
对齐方式设置：

（1）flex-start 顶对齐
（2）flex-end 底对齐
（3）center 居中
（4）space-between 两端对齐
（5）space-around 分散对齐
（6）space-evenly 平均对齐

提示: 可通过设置flex-wrap: wrap | wrap-reverse实现多行容器

1.3 项目的 6 个属性

1.3.1 项目交叉轴单独对齐 align-self

该属性可覆盖容器的align-items, 用以自定义某个项目的对齐方式
默认值 auto，继承 align-items 属性值
对齐方式设置：

（1）flex-start 顶对齐
（2）flex-end 底对齐
（3）center 居中
（4）stretch 拉伸
（5）baseline 与基线对齐(与内容相关用得极少)

1.3.2 项目排列顺序 order

设置项目在主轴上的排列顺序，默认从 0 开始，值越小越靠前
语法：order: n (n 为大于等于 0 整数)

1.3.3 项目放大因子 flex-grow

在容器主轴上存在剩余空间时, flex-grow才有意义
默认值 0 或 initial，不放大
n 正数，放大因子

1.3.4 项目收缩因子 flex-shrink

当容器主轴 “空间不足” 且 “禁止换行” 时, flex-shrink才有意义
默认值 1 或 initial，允许收缩
0，禁止收缩，不允许收缩
n 正数，收缩因子

1.3.5 项目计算尺寸 flex-basis

优先级: 项目大小 < flex-basis < min-width/height
默认值 auto，项目原来的大小
px，按像素计算
%，按百分比计算

1.3.6 项目缩放的简写 flex

三值语法: flex: flex-grow flex-shrink flex-basis
三值默认值：flex: 0 1 auto ,不放大,可收缩, 初始宽度
二值语法：flex:flex-grow flex-basis,省略了收缩因子
一值语法：flex:auto

（1）flex: 1 或者 auto == flex: 1 1 auto
（2）flex: 180px == flex: 1 1 180px
（3）flex: initial == flex: 0 1 auto
（4）flex: none == flex: 0 0 auto

2020年4月9日作业--flex 弹性布局