CSS3 Flex布局教程
Flex是一种弹性布局，要分为两部分理解Flex：
- 作用于容器（flex-container）的属性
- 作用于容器里项目（flex-item）的属性
Flex布局不同于块元素的垂直排列和行内元素的水平排列。Flex布局可以根据需要设定容器内的项目元素是水平还是垂直分布。设定了flex的方向后，我们就可以确定了Flex分布的主轴（main axis）以及交叉轴（cross axis）。
- 主轴（main axis）： Flex方向设定为水平方向，主轴为水平方向，Flex设定为垂直分布，主轴为垂直方向。
- 交叉轴（cross axis）： 与主轴垂直交叉的轴。
- 主尺寸（main size）：主轴方向的尺寸。
- 交叉尺寸（cross size）：交叉轴方向的尺寸。
Flex容器属性
display
应用Flex布局，首先需要确定容器，对容器设定display为flex。
.container {
display: flex; /* 或者 inline-flex */
}
Flex布局方向：flex-direction
容器首先要设定容器内项目的分布方向。
flex-direction用来设定容器内项目的分布方向。
语法
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
- row：水平向右，默认值
- row-reverse：水平向左
- column：垂直向下
- column-reverse：垂直向上
换行：flex-wrap
默认情况下，Flex布局的容器内项目都放置在一行（row/row-reverse表示横行，colum/column-reverse表示纵行）内。对于很多项目的情况，所有的项目放在一行内会显得很拥挤。属性flex-wrap可以让我们设定在一个方向上的项目是否允许换行。
语法
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
- nowrap：不允许换行，默认值
- wrap：允许换行，按顶部到底部的方向换行
- wrap-reverse：允许换行，按底部到顶部的方向换行
主轴上对齐：justify-content
justify-content属性定义了项目在容器主轴上的对齐方式。它有六个值表示不同的对齐方式：
语法
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
- flex-start：起始端对齐。不同的flex-direction，起始端不同。
- flex-end：末端对齐。不同的flex-direction，末端不同。
- center：居中对齐。
- space-between： 两端对齐。
- space-around：项目的两端空白空间相等对齐，项目之间的空间为两个空白空间。
- space-evenly：项目等间距对齐，包括主轴方向上的两端间距。
行内交叉轴对齐：align-items
align-items定义在一行内（row/row-reverse表示横行，colum/column-reverse表示纵行）项目的对齐方式，有点类似于文本的行内对齐。
语法：
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
- flex-start：行内交叉轴的起始端对齐
- flex-end：行内交叉轴的末端对齐
- center：行内居中对齐
- baseline：基线对齐
- stretch：行内两端延伸对齐
多行交叉轴对齐：align-content
align-content定义了多行整体在交叉轴的对齐方式，这是有区别align-items定义的行内对齐方式。
语法：
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
- flex-start：交叉轴方向上起始端对齐
- flex-end：交叉轴方向上末端对齐
- center：交叉轴方向上居中对齐
- stretch：交叉轴方向上两端延伸对齐
- space-between：交叉轴方向上两端对齐。
- space-around：交叉轴方向上，项目两端空白空间相等，项目间空间为两个空白空间。
Flex项目属性
项目顺序：order
项目默认按代码的顺序排列。使用order属性则可以使用改变项目的排列顺序。
.item {
order: <integer>; /* default is 0 */
}
默认值为0，order值大往后排列。
项目扩大空间占比：flex-grow
flex-grow定义了项目在容器剩余空间的扩大比例。
- 默认值为0，表示项目按指定的尺寸排列，不扩大。
- 都为1，表示所有项目均分剩余空间。
- 一个项目为2，其他项目为1，表示此项目占的空间是其他项目的两倍。
语法：
.item {
flex-grow: <number>; /* default 0 */
}
项目收缩：flex-shrink
多个项目时，如果空间不够，那么项目需要收缩。flex-grow默认值为1。
项目的flex-shrink的值为0，其他项目值为1时，当容器的空间不足，那么其他项目按等比例收缩，flex-shrink为0的项目不收缩。
语法：
.item {
flex-shrink: <number>; /* default 1 */
}
项目在分配剩余空间前的尺寸：flex-basis
flex-basic定义了项目在分配剩余空间前的尺寸。
语法：
.item {
flex-basis: <length> | auto; /* default auto */
}
flex-basis的值可以是百分比或空间尺寸。
flex-basis值为0，项目不参与额外空间的分配
flex-basis值为auto，项目根据flex-group的设置分配额外的空间
项目组合属性：flex
flex为flex-group，flex-shrink和flex-basis属性的组合。推荐使用此属性代替其他属性。
语法：
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
行内交叉轴对齐：align-self
align-items定义了行内所有的项目在交叉轴上的对齐方式，align-self则定义单个项目在交叉轴的对齐。
语法：
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
