1、所有元素均可转弹性容器,但必须是子元素,写代码时要写被转元素的父元素。
2、display:flex 元素转为块级弹性容器 display:inline-flex 转为行内块级弹性容器
3、方向选择:
属性:flex-direction
值:row 默认 主轴从左到右
row-reverse 反向,从右到左
column 垂直,从上到下
column-reverse 垂直 从下到上
3、换行:
属性;flex-wrap
值:wrap 换行
nowrap 不换行(默认)
wrap-reverse 反向排列
4、主轴方向选择及是否换行属性
属性:flex-flow:方向 是否换行 有两个 值 第一个值表示方向,第二个值表示是否换行,中间用空格隔开。
5、主轴对齐方式及控件分布
属性:
整体对齐
justify-content:flex-start 默认值 整体从起点排列
justify-conter:flex-end 整体从终点开始排列
justify-content:conter 整体居中
空间分布:
justify-content:space-between 两边紧贴,中间平均分布空间
justify-content:space-around 两边边距相等,中间边距是两边的2倍
justify-content:space-evenly 所有元素边距相等
6、垂直整体对齐
align-items:strech 默认,整体垂直拉伸
align-items:flex-start 整体从起点开始排列
align-items:flex-end 整体从终点开始排列
align-items:conter 整体居中
7、多行垂直对齐及空间分布
align-content:space-between 上下贴边,中间平均分配
align-content:space-around 两边边距相等,中间边距是两边的两倍
align-content:space-evenly 所有边距相等