1.display
display:flex | inline-flex
块级伸缩容器 行内级伸缩容器
2.flex-direction
指定主轴的方向 flex-direction:row(默认值)| row-reverse | column | column-reverse
3.flex-wrap
伸缩容器在主轴线方向空间不足的情况下,是否换行以及该如何换行
flex-wrap:nowrap(默认值) | wrap | wrap-reverse
4.flex-flow
是flex-direction和flex-wrap的缩写版本,它同时定义了伸缩容器的主轴和侧轴
,其默认值为 row nowrap
5.justify-content
用来定义伸缩项目在主轴线的对齐方式,语法为:
justify-content:flex-start(默认值) | flex-end | center | space-between | space-around
6.align-items
用来定义伸缩项目在交叉轴上的对齐方式,语法为:
align-items:flex-start(默认值) | flex-end | center | baseline | stretch
7.align-content
用来调整伸缩项目出现换行后在交叉轴上的对齐方式,语法为:
align-content:flex-start | flex-end | center | space-between | space-around | stretch(默认值)