网页布局是css的一个关键应用。传统布局是靠display、position、float属性实现的，但是特殊布局不容易实现，比如垂直居中。什么是弹性布局？?Flex是FlexibleBox的缩写，意思是“弹性布局”，为盒模型提供最大的灵活性。任何容器都可以指定为弹性布局。采用弹性布局的元素称为弹性容器。他所有的子元素都会自动成为容器成员，称为flexitems，简称items。自适应web容器的flex布局默认有两个轴：水平主轴（mainaxis）和垂直横轴（crossaxis）。主轴的起始位置（与边框的交点）称为mainstart，结束位置称为mainend；交叉轴的起始位置称为crossstart，结束位置称为crossend。默认情况下，项目沿主轴排列。单个item占用的主轴空间称为mainsize，单个item占用的横轴空间称为crosssize。容器的属性flex-direction设置排列方向（向下、向上、向左、向右）的flex-wrap。当无法放置内容时，flex-flow是flex-direction和flex-wrap的缩写。默认值rownowrapjustify-content定义了在主轴上的对齐方式。align-items定义项目如何在横轴上对齐。align-content定义多个轴的对齐方式flex-direction属性值有四种：row（默认值）：水平方向，从左到右，从左边开始。row-reverse：水平方向，从右到左，起点在右边。column：垂直方向，从上到下。column-reverse：垂直方向，从下到上。flex-wrap属性值一共有三个：nowrap：不换行。wrap：正常换行，在第一行下面。wrap-reverse：换行符，在第一行之上。justify-content属性值有五个：flex-start（默认值）：左对齐flex-end：右对齐center：居中space-between：两端对齐space-around：每一项两边的间隔是平等的。align-items属性值有五个：flex-start：横轴起点对齐。flex-end：横轴末端对齐。center：对齐横轴的中点。baseline：项目中第一行文本的基线对齐方式。stretch（默认值）：如果item没有设置高度或者设置为auto，它会占据整个容器的高度。align-content属性有六个值：flex-start：横轴起点对齐。flex-end：横轴末端对齐。center：对齐横轴的中点。space-between：与横轴两端对齐，轴与轴之间的间隔均匀分布。space-around：每个轴的两侧等距。stretch（默认）：轴填充整个交叉轴。item属性order：定义item的排序顺序，值越小，排序越高，默认为0。flex-grow属性：定义item的放大比例，默认为0flex-shrink：定义项目的收缩率，默认为1。flex-basis：定义项目在分配多余空间之前在主轴上占据多少空间。默认值为auto，即项目的原始大小。flex：是flex-grow、flex-shrink、flex-basis的缩写，默认值为01auto。align-self：该属性允许单个项目与其他项目具有不同的对齐方式，并且可以覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性。如果没有父元素，相当于stretch。
