这篇文章简单的介绍了flex布局中"容器(父级元素)"的相关属性
基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称容器。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称项目, 上代码理解理解 任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。
<div class="box">
<div class="item one">项目1</div>
<div class="item two">项目2</div>
<div class="item three">项目3</div>
<div class="item four">项目4</div>
</div>
对于上述代码，容器(class="box")有6个属性，容器可以当做是父盒子，就是设置了display: flex 属性的盒子。
flex-direction
- 决定主轴的方向(即项目的排列方向)
row(默认值)：设置主轴为水平方向，起点在左端
row-reverse：设置主轴为水平方向，起点在右端
column：设置主轴为垂直方向，起点在上沿
column-reverse: 设置主轴为垂直方向，起点在下沿
flex-wrap
- 定义子盒子的换行情况
flex-wrap属性有三个值：
norap(默认值)：不换行
wrap：换行，第一行在上方
当 box 的 flex-wrap 设成 nowrap 成员没有达到换行的宽度不会有影响，但是如果总宽度超过了父盒子,成员将被挤压。
justify-content
- 设置成员在主轴上的对齐方式
justify-content属性有五个值：
lex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-betweet: 两端对齐，成员之间的间隔全都相等
space-around: 每个成员两侧的间隔相等。所以，成员之间的间隔比项目与边框的间隔大一倍
align-items
- align-items属性定义成员在交叉轴(主轴为x轴的话，交叉轴就是y轴)上如何对齐。
align-items属性有五个值：
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center: 交叉轴的中点对齐
baseline: 成员的第一行文字的基线对齐
stretch(默认值)：如果成员未设置高度或设为auto，将占满整个容器的高度
align-content
- align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。也就是说如果成员只有一行那么这个属性就没有什么用，下面又把成员设置为8个，并让它们换行
align-content属性有六个值：
flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：与交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch（默认值）：轴线占满整个交叉轴
