Flexbox布局

flex container 父层
flex item 子层

属性：
1.flex-direction 属性
flex-direction 属性指定了弹性子元素在父容器中的位置，
在react中flex-direction 的默认值是Colum
其他原生和Vue中flex-direction的默认值为row
（1）row：横向从左到右排列（左对齐）
父层flex-direction为row

（2）row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。

（3）column：纵向排列。

（4）column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

2.justify-content 属性 (定义了项目在主轴上的对齐方式)
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
justify-content: flex-start | flex-end | center | space-between | space-around
flex-start：
弹性项目向行头紧挨着填充。这个是默认值。
flex-end：
弹性项目向行尾紧挨着填充。
center：
弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
space-between：
弹性项目平均分布在该行上。
space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。

3.align-items 属性
可以决定其子元素插入次轴（与主轴垂直的轴，有时若主轴方向为row，则次轴方向为colum）的分隔方式
align-items: flex-start | flex-end | center | baseline | stretch

flex-start：弹性盒子元素的次轴起始位置的边界紧靠住该行的次轴起始边界。
flex-end：弹性盒子元素的次轴起始位置的边界紧靠住该行的次轴结束边界。
center：弹性盒子元素在该行的次轴上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与次轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch：如果指定次轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
(将只有子元素样式中的width属性去掉之后，alignItems: 'stretch’才能生效。)
例子：