parent属性

1.display:flex;

这定义了一个flex容器; 内联或阻止取决于给定的值。它为所有直接孩子提供了灵活上下文。

注：css列对flex容器没有影响

2.flex-direction:row | row-reverse | column | column-reverse;

row（默认）：从左到右ltr; 从右到左rtl

row-reverse：从右到左ltr; 从左到右rtl

column：同样row但从上到下

column-reverse：同样row-reverse但从下到上

3.flex-wrap:nowrap | wrap | wrap-reverse;

nowrap （默认值）：所有弹性项目都在一行上

wrap：flex项目将从上到下包裹到多行。

wrap-reverse：flex项目将从下到上包裹多行

4.flex-flow:<‘flex-direction’> || <‘flex-wrap’>

这是flex-direction和flex-wrap属性的简写，它们共同定义了flex容器的主轴和交叉轴。默认值为row nowrap

flex-start （默认值）：项目朝起始行打包

flex-end：物品被打包到最后一行

center：项目沿着线居中

space-between：物品均匀分布在线上; 第一项是在起始行，最后一项是在结束行

space-around：项目均匀分布在线条周围，空间相等。请注意，视觉上空间不相等，因为所有项目在两侧都有相等的空间。第一个项目将在容器边缘上有一个空间单位，但在下一个项目之间有两个单位的空间，因为下一个项目有自己适用的间距。

space-evenly：项目是分布的，以便任何两个项目之间的间距（和边缘的空间）相等

6.align-items:stretch | flex-start | flex-end | center | baseline;

stretch （默认）：拉伸以填充容器（仍然尊重最小宽度/最大宽度）

flex-start：项目的交叉开始边距边缘放置在交叉起始线上

flex-end：项目的跨端边缘位于交叉线上

center：项目以横轴为中心

baseline：项目已对齐，例如其基线对齐

flex-start：行打包到容器的开头

flex-end：行打包到容器的末尾

center：行包装到容器的中心

space-between：线条均匀分布; 第一行是容器的开头，而最后一行是在容器的最后

space-around：线条均匀分布，每条线周围的空间相等

stretch （默认值）：线条拉伸以占用剩余空间

子属性

1.order:;

order属性控制它们在Flex容器中的显示顺序。

2.flex-grow:;

这定义了Flex项目在必要时增长的能力。它接受一个无比的值作为一个比例。它规定了项目应占用的Flex容器内可用空间的大小。

如果所有项目都flex-grow设置为1，则容器中的剩余空间将平均分配给所有子项。如果其中一个孩子的值为2，则剩余空间占用的空间是其他孩子的两倍

注：负数无效

3.flex-shrink:;

这定义了Flex项目在必要时缩小的能力。

注：负数无效

4.flex:none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

这是速记flex-grow, flex-shrink和flex-basis组合。第二个和第三个参数（flex-shrink和flex-basis）是可选的。默认是0 1 auto。