认识flex布局
-
使用最多的布局方案(IE10以下不支持)
-
开启了flex布局的元素叫flex container
-
flex container里面的直接子元素叫flex items
flex布局模型
- 主轴:默认是从左到又main size
- 交叉轴:默认从上到下
flex相关的属性
- flex container上的css属性
- flex-flow缩写属性flex-direction||flex-wrap
- flex-direction默认从左到右row/row-reverse从右到左/colum主轴从上到下colum-reverse从下到上
- flex-wrap属性设置为wrap会换行显示
- 默认情况下所有的元素都在同一行显示,在同一行放不下的时候会压缩显示
- justify-content决定主轴flex items的对齐方式有很多参数,都是可以决定不同的对齐方式
- align-items决定了flex items在交叉轴上的对齐方式
- align-content决定多行在交叉轴上的显示
- flex items 上的相关属性
- flex缩写属性是flex-grow||flex-basis||flex-shrink的缩写属性
- flex-grow元素成长默认值是0
- 当所有的item设置的值大于1时候,会暂满整个父元素
- 当所有的item设置的值小于1时候会按照比例均分
- flex-basis决定主轴上元素的大小优先级更高
- flex-shrink元素收缩默认值是1
- 当所有的item设置的值大于1时候，会按照比例收缩
- 当所有的item设置的值小于1时候,会超出父元素
- order决定item的排布顺序,值设置为正整数负整数或者0,值越小越靠前
- align-self会覆盖align-items设置的值,就是说可以具体设置莫一个item的对齐方式
