移动端web开发（二）--- flex布局
一、flex布局概念
1、flex 是 flexible Box 的缩写，意思为弹性布局，使布局变得更加灵活，任何一个元素都可以定义为flex布局。
2、采用flex布局的元素称为flex容器，他的所有子元素自动成为容器成员，称为flex项目。
3、当父元素设置为flex布局之后，所有的子元素的 float、clear和 vertical-align 属性将不起作用。
4、flex容器存在两根轴，主轴（默认为水平轴）和副轴（默认为垂直轴），项目默认沿主轴排列。
5、总的来说就是通过设置父盒子为flex布局并设置父盒子和子盒子的相应属性，来控制子盒子的位置和排列方式。
二、flex容器的属性
1、所有属性
① flex-direction：设置主轴方向。
② justify-content：设置主轴上元素排列方式。
③ flex-warp：设置子元素是否换行。
④ align-content：设置侧轴上子元素的排列方式（多行）
⑤ align-items：设置侧轴上的子元素排列方式（单行）
⑥ flex-flow：复合属性，简写形式，同时设置 flex-direction 和 flex-warp 属性
2、flex-direction
该属性用来设置容器主轴的方向，默认主轴方向为 x 轴方向，水平向右，侧轴方向为 y 轴方向，水平向下。当设置了主轴的方向，那么剩下的另一个方向就是侧轴方向。子元素是跟着主轴的方向来进行排列。
属性值有四种：
① row(默认值)：设置主轴为x轴方向，子元素从左向右排列
② row-reverse：这只主轴为x轴方向，子元素从右向左排列
③ clumn：设置主轴方向为y轴方向，子元素从上到下排列
④ clumn-reverse：设置主轴方向为y轴方向，子元素从下往上排列
如图分别为：clumn-reverse、clumn、row、row-reverse
3、justify-content
该属性用来设置子元素在主轴上的排列方式，当然只适用于子元素排在一行上的情况，常用来设置中心对齐。当默认主轴为x轴方向时，属性值有五种：
①flex-start(默认值)：左对齐
② flex-end：右对齐
③ center：居中对齐
④ space-between：两端对齐，子元素之间的间隔平分多余空间
⑤ space-around：平局分配多余空间，子元素两侧的间隔相等，所以总元素之间的间隔是子元素与边界的间隔的一倍。
4、flex-warp
该属性用来设置主轴上的子元素是否换行，默认所有子元素都是排到一行上的。属性值有3种：
① nowarp（默认）：不换行
② warp：换行，第一行在最上面
③ warp-reverse：换行，第一行在最下面
5、align-items
该属性用来设置单行排列的侧轴上子元素的排列方式，通常用来设置垂直居中。属性值有5种：
① flex-start：从头部开始
② flex-end：从尾部开始
③ center：居中
④ strerch：拉伸占满整个盒子的高度
⑤ baseline：子元素的第一行文字的基线对齐
6、align-content
该属性用来设置多行排列的侧轴上子元素的排列顺序，属性值有6种：
① flex-start：从头部开始
② flex-end：从尾部开始
③ center：居中
④ strerch：每一行都拉伸，平均占满整个盒子的高度
⑤ space-around：每一行上下两侧的间隔都相等，所以行之间的间隔是行与边界的间隔的两倍。
⑥ space-between：第一行与头部对齐，最后一行与尾部对齐，中间的行的间隔平分剩余空间。
7、flex-flow
该属性是flex-direction 和 flex-warp 属性的简写形式，默认值为： row 和 nowrap。
三、flex 项目的属性
1、所有属性
① order：设置项目的排列顺序。
② flex-grow：设置项目的放大比例。
③ flex-shrink：设置项目的缩小比例。
④ flex-basis：设置项目占据的主轴空间。
⑤ flex：是flex-grow、flex-shrink和flex-basis 的简写方式。
⑥ align-self：设置项目的对齐方式。
2、order
该属性用来设置项目的排列顺序，数值越小，排列顺序就越靠前，默认为 0。
3、flex-grow
该属性设置项目的放大比例，默认为0，即如果存在剩余空间，也不会放大项目。如果所有项目的flex-grow 属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
4、flex-shrink
该属性用来设置项目的缩小比例，默认为 1 ，即如果空间不足，项目将会缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
5、flex-basis
该属性设置了项目在分配多余空间之前，项目占据的主轴空间，默认值为 auto ，即项目本来的大小。浏览器根据这个属性的值，计算主轴是否有多余空间。
6、flex
该属性是flex-grow、flex-shrink和flex-basis 的简写方式，默认值为 0 1 auto，后两条属性可以省略。
该属性有两个快捷值：auto（1 1 auto）和 none（0 0 auto）
7、align-self
该属性用来设置单个项目与其他项目不同的对齐方式，可覆盖align-items属性，默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。