弹性盒子

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

initial  默认值的意思  inherit 从父元素继承属性

flex-direction:设置盒子的方向；row默认，水平。column，垂直。xxx-reverse相反的方向

justify-content:在横轴上对齐方式。flex-start默认值项目位于开头。flex-end位于结尾。center位于中心。

space-between位于各行之间有空白的容器内。space-around位于各行之前、间、后都有空白的容器内。

align-items:在侧轴对齐方式。stretch默认，拉伸以适应容器。center位于中心。flex-start，flex-end同主轴。

base-line位于基线上。

flex-wrap:超出是否拆行。no-wrap默认值规定不拆行不拆列。wrap必要时拆行列。wrap-reverse，以相反方向拆行列。

align-content:修改flex-wrap，使行对齐。值和justify-content一样。

flex-flow:flex-direction和flex-wrap简写

order:设置弹性盒子子元素排列顺序。number规定顺序

align-self:在子元素使用。覆盖align-items属性。

flex：设置弹性盒子的子元素如何分配空间