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

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

2.需要重点掌握的 6 个属性

2.1 容器设置的 3 个属性

• flex-flow 设置主轴方向和项目换行
• justify-content 设置主轴项目对齐方式
• align-items 设置交叉轴项目对齐方式

2.2 项目设置的 3 个属性

• align-self 交叉轴单独对齐
• ordeo 项目排列顺序
• flex 项目缩放的简写