主要提供简便、完整、响应式布局解决方法,设置flex布局后元素的 float、clear、vertical-align属性将失效
flex-direaction 决定主轴的方向
- 参数:
- row(默认值): 主轴为水平方向,起点在左端
- row-reverse: 同上,起点在右端
- column: 主轴为垂直方向,起点在上方
- column-reverse: 同上,起点在下方
flex-wrap 如果默认轴线排序不下,则换行
- 参数:
- nowrap(默认): 不换行
- wrap: 换行,第一行在上方
- wrap-reverse: 换行,第一行在下方
flex-flow 是flex-direaction 和 flex-wrap的简写 justify-content 在主轴(水平)上的对齐方式
- 参数:
- flex-start(默认值): 左对齐
- flex-end: 右对齐
- center: 居中
- space-between: 两端对齐,项目之间间隔相等
- space-around: 项目两侧有间隔,类似margin后的效果
align-items 定义项目交叉(垂直)轴上如何对齐
- 参数:
- flex-start: 起点对齐
- flex-end: 重点对齐
- center: 重点对齐
- baseline: 第一行文字的基线对齐
- stretch: 如果项目未设置高度或者auto,将占满整个容器
align-content 多根轴线的对齐方式,单一不起作用
- 参数:
- flex-start: 交叉轴 起点对齐
- flex-end: 交叉轴 终点对齐
- center: 交叉轴 中点对齐
- space-between: 交叉轴两端对齐,轴线之间平均分布
- sapce-around: 同margin
- stretch: 占满整个交叉轴
order
定义上项目的排列顺序,数值越小,排列越靠前,默认为0
flex-grow
定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
flex-shrink
定义项目的缩小比例,默认为1,空间不足,该项目将缩小
flex-basis
在分配多余空间之前,先计算是否有多余空间
flex
上面三个的简写
align-self
允许单个项目和其他项目有不一样的对齐方式,可覆盖align-items属性,
默认auto,表示继承父元素的align-items属性,如果没有父元素则等同于stretch