二、伸缩容器的相关属性说明
1，display属性
通过 display属性可以指定某元素是否为伸缩容器，可选的属性值如下：
flex：产生块级伸缩容器
inline-flex：产生行内级伸缩容器
下面是一个最简单的伸缩容器样例：
完整代码如下：
hangge.com
.flex-container{
display: flex;
border: 1px solid black;
width: 300px;
height: 120px;
}
.flex-item{
width: 50px;
height: 50px;
margin: 5px;
background-color: #60BDFF;
color: #FFFFFF;
font-size: 20px;
font-weight:bold;
}
1
2
32，flex-direction属性
通过 flex-direction属性可以指定主轴的方向，可选值有：row、row-reverse、column、column-reverse。
.flex-container{
display: flex;
flex-direction: column;
}(1)row(默认值)：水平方向伸缩，伸缩项目从左向右排列。
(2)row-reverse：水平方向伸缩，伸缩项目从右向左排列。
(3)column：垂直方向伸缩，伸缩项目从上向下排列。
(4)column-reverse：垂直方向伸缩，伸缩项目从下向上排列。
3，flex-wrap属性
该属性主要用来指定伸缩容器在主轴线方向空间不足的情况下，是否换行以及如何换行。可选值有：nowrap、wrap、wrap-reverse。
.flex-container{
display: flex;
flex-wrap: wrap;
}(1)nowrap(默认值)：即使空间不足，伸缩容器也不允许换行。
(2)wrap：在空间不足情况下允许换行。如果主轴为水平轴，则换行的方向是从上到下。
(3)wrap-reverse：在空间不足情况下允许换行。不过换行方向同 wrap相反。
4，flex-flow属性
该属性是 flex-direction 和flex-wrap属性的缩写版本，它同时定义了伸缩容器的主轴和侧轴，其默认值是：row nowrap。
比如：
.flex-container{
display: flex;
flex-flow: column wrap;
}等价于：
.flex-container{
display: flex;
flex-direction: column;
flex-wrap: wrap;
}5，justify-content属性
该属性用来定义伸缩项目沿主轴线的对齐方式，可选值有：flex-start、flex-end、center、space-between、space-around。
.flex-container{
display: flex;
justify-content: center;
}(1)flex-start(默认值)：伸缩项目向主轴线的起始位置靠齐。
(2)flex-end：伸缩项目向主轴线的结束位置靠齐。
(3)center：伸缩项目向主轴线的中间位置靠齐。
(4)space-between：伸缩项目会平均地分布在主轴线里。第一个项目在主轴线开始位置，最后一个项目在终点位置。
(5)space-around：伸缩项目会平均地分布在主轴线里，两端保留一半的空间。
6，align-items属性
该属性用来定义伸缩项目在伸缩容器的交叉轴上的对齐方式，可选值有：flex-start、flex-end、center、baseline、stretch。
.flex-container{
display: flex;
align-items: center;
}
(1)flex-start(默认值)：伸缩项目向交叉轴的起始位置靠齐。
(2)flex-end：伸缩项目向交叉轴的结束位置靠齐。
(3)center：伸缩项目向交叉轴的中间位置靠齐。
(4)stretch(默认值)：伸缩项目在交叉轴方向拉伸填充整个伸缩容器。
注意：这种情况下项目不能设置高度，否则看不到效果。
(5)baseline：伸缩项目根据它们的基线对齐。
.flex-container{
display: flex;
align-items: baseline;
}
#item1{
padding-top: 15px;
}
#item2{
padding-top: 10px;
}
#item3{
padding-top: 5px;
}7，align-content属性
该属性用来调整伸缩项目出现换行后在交叉轴上的对齐方式，类似于伸缩项目在主轴上使用 justify-content。可选值有：flex-start、flex-end、center、space-between、space-around、stretch。
.flex-container{
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}(1)flex-start：伸缩项目向交叉轴的起始位置靠齐。
(2)flex-end：伸缩项目向交叉轴的结束位置靠齐。
(3)center：伸缩项目向交叉轴的中间位置靠齐。
(4)space-between：伸缩项目在交叉轴重平均分布。第一行在交叉位置开始位置，最后一行在交叉轴结束位置。
(5)space-around：伸缩项目在交叉轴重平均分布。并且两边各有一半的空间。
(6)stretch(默认值)：伸缩项目会在交叉轴上伸展以占用剩余的空间。
