控制一堆元素的排列方式， 可以选择换不换行，方向等。
轴
justify : 主轴 ||| align : 副轴
flex-direction为row时水平为主轴，垂直为副轴。
外层
•
display : flex
•
flex-direction : row | column | row-reverse | column-reverse
•
flex-wrap : nowrap | wrap | wrap-reverse ; reverse 是第一行在最下面。
•
flex-flow : flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
•
justify-content : flex-start | center | flex-end | space-around | space-between | space-evenly ; 主轴上内容的对齐方式
•
align-items : flex-start | center | flex-end | baseline | stretch ; 副轴上内容的对齐方式
•
align-content : flex-start | flex-end | center | space-between | space-around | stretch ; 多根轴线之间的对齐方式，也就是换行的。
元素上
flex-grow : 数组，可小数， 元素的比例，
flex-shrink : 缩小比例， 元素超过外层而需要缩小的时候谁比例大谁缩小的多。设为0不缩小
flex-basic : 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。
可设置 固定的， 百分比， fit-content ,max-content,min-content,content,fill， 默认的auto是说参照我的width和height。
order : 越小越靠前
align-self : auto | flex-start | flex-end | center | baseline | stretch ; 单独分配对齐方式。
❕
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
评论区