容器用display: flex;或display: inline-flex;指定为弹性Flex布局。采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
容器有6个属性可以设置：
- flex-direction 表示主轴方向，一般使用默认的水平方向，不设置
- flex-wrap 表示多条轴线如何换行，一般使用默认的不换行，不设置
- flex-flow 是上面2个属性的简写，一般不设置
- justify-content 定义了项目在主轴上的对齐方式，有时会用到！
- align-items 定义项目在侧轴上对齐的对齐方式，有时会用到！
- align-content 定义了多根轴线的对齐方式，一般用不到，不设置
项目有6个属性可以设置：
order 定义项目的排列顺序。数值越小，排列越靠前，默认为0。flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。有时会用到！flex-shrinkflex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-basis 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。有时会用到。flexflex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。有时会用到，一般只用第一个值。align-selfalign-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。