flex布局
容器有六大属性
- flex-direction 决定主轴的方向 有row(默认)、row-reverse、column、column-reverse
- flex-wrap nowrap(默认)、wrap、wrap-reverse
- flex-flow 是前两者的简写形式、默认值为row nowrap
- justify-content 定义在主轴的对齐方式 flex-start、flex-end、center、space-between、space-around
- align-items 定义在交叉轴的对齐方式 flex-start、flex-end、center、baseline、stretch
- align-content 定义多根轴线的对齐方式 flex-start、flex-end、center、space-between、space-around、stretch
项目有六大属性
- order 定义项目的排列顺序。数值越小,排列越靠前,默认为0
- flex-grow 定义项目的放大比例。默认为0 即如果存在剩余空间 也不放大
- flex-shrink 定义项目的缩小比例。默认为1 即如果空间不足,该项目将缩小
- flex-basis 定义在分配多余空间前,项目占据的主轴空间。可以设定固定值,则项目占据固定空间
- flex 是flex-grow、flex-shrink、flex-basis的简写。默认值为0 1 auto 后两个属性可选
- align-items 允许单个项目有其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素则等同于stretch