flex容器属性
改变主轴方向flex-direction
flex-direction: row默认
flex-direction: row-reverse
flex-direction: column
flex-direction: column-reverse
换行flex-wrap
flex-wrap: nowrap默认
flex-wrap: wrap
flex-wrap: wrap-reverse
缩写flex-flow: [flex-direction] [flex-wrap]
flex-flow: column wrap
主轴对齐justify-content
justify-content: flex-start默认
justify-content: flex-end
justify-content: space-around 平均分配 每个方块的margin-left+margin-right+width相等
justify-content: space-between 两边没有空隙 中间空隙平均分配
justify-content: space-evenly所有空隙平均分配
交叉轴整体对齐align-content
必须要有折行属性才能生效
align-content: stretch默认
-
如果交叉轴上的宽度未设置则自动拉伸填满交叉轴
-
-
若交叉轴上的宽度已经设置则效果和flex-start一样
-
align-content: flex-start
align-content: flex-end
align-content: center
其他属性 space-around``space-between``space-evenly和主轴属性类似
交叉轴每一行对齐 align-items
align-items: stretch默认
align-items: flex-start
align-items: flex-end
align-items: center
align-items: baseline 内容以小写x为基线对齐
内联与块的上下左右居中布局
内联上下左右居中
块级上下左右居中
不定项居中布局
均分列布局
子项分组布局
复杂模式 使用div嵌套
简单方式 margin-right: auto
flex子项属性
扩展比例flex-grow
一个子元素时
-
默认值为0
-
比例值大于等于1，沾满剩余所有空间
-
比例值为0.5，占剩余空间的一半
多个子元素时
- 只有一个有flex-grow时
- 两个都有flex-grow时
- 当多个元素加起来小于1时，还有剩余空间
收缩比例flex-shrink
- 默认值为1，溢出部分完全收缩，小数按比例收缩
默认情况当有两个及以上需要收缩时
-
mainwidth: 400 -
box1width: 200 -
box2width: 300 -
则，默认情况下收缩后 所占比例按照宽度计算
-
box1收缩后所占尺寸：200-2/5*(200+300-400)=160 -
box2收缩后所占尺寸：300-3/5*(200+300-400)=240
不同比例收缩时
-
mainwidth: 400 -
box1width: 200 -
box2width: 300 -
则，比例情况下收缩后 所占比例按照宽度计算
-
box1收缩后所占尺寸：200-4/7*(200+300-400)=142 -
box2收缩后所占尺寸：300-3/7*(200+300-400)=257
指定flex元素在主轴上的初始大小flex-basis
-
当主轴方向是水平时，覆盖水平宽度
-
当主轴方向是垂直时，覆盖垂直高度
-
可选值：0% auto 200px 100% 0
flex-basis: auto默认值
flex-basis: 0表示占据最小宽度，会竖起来
flex缩写
flex: 1
flex: 0
flex: auto
改变某个子项的排序位置order
-
order: 0当前位置保持不变 -
order: -1向前排 -
order: 1向后拍
