flex 是 Flexible Box的缩写，是“弹性布局”，用来为盒模型提供最大的灵活性
采用flex 布局的元素，称为flex容器，简称“容器”
它所有的子元素自动成为容器成员，称为flex项目，简称“项目”

容器属性

1
2
3
4
5
6
flex-direction //排列的方向 row(左--->右)  row-reverse(右--->左)  column(上---->下) column-reverse(下--->上)
flex-wrap //是否换行 warp 换行 nowart 不换行 wrap-reverse  反向换行
flex-flow //为上面俩属性的缩写  <flex-direction> || <flex-wrap>;
justify-content //主轴内容对齐方式  flex-start(左对齐)  flex-end(右对齐) center(居中对齐) space-around(每个项目两侧的间隔相等) space-between(两端对齐，项目之间的间隔都相等。)
align-items //交叉轴对其方式 flex-start | flex-end | center | baseline | stretch;
align-content //上面俩的简写

项目属性

1
2
3
4
5
6
order   //项目的顺序 数值越小越靠前
flex-grow //定义项目的放大比例默认为0，即如果存在剩余空间，也不放大
flex-shrink //定义项目的缩小比例
flex-basis //属性定义了在分配多余空间之前，项目占据的主轴空间（main size）
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。