flex属性作用在块级元素和内联元素时的用法分别为display:flex display:inline-flex
作用在父容器上的属性有:
flex-direction: row | row-reverse | column | column-reverse // 控制主轴的方向
flex-wrap: wrap | nowrap | wrap-reverse // 控制主轴上元素的换行方式
flex-flow: 前两个属性的合并写法
justify-content: center | flex-start | flex-end | space-between | space-around | space-evenly // 控制主轴上元素的对齐方式
align-items: center | flex-start | flex-end | stretch | baseline // flex子项们相对于flex容器在垂直方向上的对齐方式
align-content: center | flex-start | flex-end | space-between | space-around | space-evenly // 控制垂直方向每行的对齐方式(只有多行的情况下才会起作用)
作用在item元素上的属性:
order: 0 // 设置了该属性的元素 会根据该属性的大小进行排序
flex-grow: 0 // 占据当前行剩余空间的比例
flex-shrink: 1 // 主要处理当flex容器空间不足时候,单个元素的收缩比例,空间不足的情况下默认全部收缩
flex-basis: auto // 分配剩余空间之前元素的默认大小
flex: 上面三个元素的合并缩写形式
align-self: auto | flex-start | flex-end | center | baseline | stretch // 控制单独某一个flex子项的垂直对齐方式