flex布局

flex布局

容器有六大属性

1. flex-direction    决定主轴的方向 有row(默认)、row-reverse、column、column-reverse
2. flex-wrap         nowrap(默认)、wrap、wrap-reverse
3. flex-flow          是前两者的简写形式、默认值为row nowrap
4. justify-content 定义在主轴的对齐方式    flex-start、flex-end、center、space-between、space-around
5. align-items      定义在交叉轴的对齐方式 flex-start、flex-end、center、baseline、stretch
6. align-content   定义多根轴线的对齐方式 flex-start、flex-end、center、space-between、space-around、stretch

项目有六大属性

1. order             定义项目的排列顺序。数值越小，排列越靠前，默认为0
2. flex-grow       定义项目的放大比例。默认为0 即如果存在剩余空间 也不放大
3. flex-shrink     定义项目的缩小比例。默认为1 即如果空间不足，该项目将缩小
4. flex-basis       定义在分配多余空间前，项目占据的主轴空间。可以设定固定值，则项目占据固定空间
5. flex               是flex-grow、flex-shrink、flex-basis的简写。默认值为0 1 auto 后两个属性可选
6. align-items    允许单个项目有其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素则等同于stretch