必须有
display:flex;
有6个属性设置在容器上
flex-direction //排列方向
水平排列
row row-reverse
垂直排列
column column-reverse
flex-wrap //换不换行
默认不换行:nowrap ,
换行: wrap ,
换行,第一行在下方: wrap-reveerse
flex-flow
//前两个的结合
排列方向 换不换行
默认:row wrap
justify-content //主轴对齐方向
flex-start(默认值):左对齐
flex-end 右对齐
center 居中
space-between 两端对齐
space-around 拉手
align-items //交叉轴上对齐
flex-start 上
flex-end 下
center 居中
stretch 占满整个容器的高度(默认值)
baseline 第一行文字的基线对齐
align-content //多根轴线的对齐
flex-start
flex-end
center
stretch(默认值)
space-between
space-around
有6个属性设置在项目上
order 排列顺序。数值越小,排列越靠前,默认为0。
flex-grow 放大比例,默认为0,即如果存在剩余空间,也不放大。
flex-shrink 缩小比例,默认为1
flex-basis 它的默认值为auto,即项目的本来大小。当有额外的空间的时候用
content –> width –> flex-basis (limted by max|min-width)
flex 前三个结合 一般使用这个 , 后两个属性可选 默认值为0 1 auto,
align-self 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性
align-self: auto | flex-start | flex-end | center | baseline | stretch;