2009年，W3C提出了一种新的解决方案——flex布局，能够以简单、完整、响应式的方式实现各种页面布局。原始链接布局的来源垂直居中是一种常见的页面布局方式。对于行内元素，可以设置text-align:center;vertical-align:center，对于块级元素，通常可以使用如下设置。parent{position:relative;}.child{position:absolute;顶部：50%；左：50%；transform:translate(-50%,-50%);}然而，对于简洁优雅的css，除了inline、inline-block、blocklayout之外，css的第四种布局方式flex应运而生。只需下面的设置就可以轻松实现元素的垂直居中。父母{显示：弹性;证明内容：居中；align-items:center;}注意：设置为flex布局，子元素的float、clear、vertical-align属性会使flex的基本概念失效。采用弹性布局的元素称为弹性容器。元素中的所有子元素都称为弹性项目。容器默认有两个轴：水平主轴和垂直横轴。主轴的起始位置（与边框的交点）称为mainstart，结束位置称为mainend；交叉轴的起始位置称为crossstart，结束位置称为crossend。默认情况下，项目沿主轴排列。单个item占用的主轴空间称为mainsize，单个item占用的横轴空间称为crosssize。flex容器的属性flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-contentflex-directionflex-direction属性决定了主轴的方向。row（默认值）：主轴是水平的，起点在左端row-reverse：主轴是水平的，起点在右端column：主轴是垂直的，起点是alongthetopcolumn-reverse：主轴垂直，起点在底部沿flex-wrap默认情况下，项目排列在主轴上，flex-wrap属性定义了如果一条线的主轴不适合。nowrap(默认值):,不换行wrap:wrap,第一行在wrap-reverse:wrap上面,第一行在flex-flow下面flex-flow属性是flex-direction属性的简写形式flex-wrap属性，默认值为rownowrap。justify-contentjustify-content属性定义项目（self元素）在主轴上的对齐方式。flex-start（默认）：左对齐flex-end：右对齐center：居中space-between：两端对齐，项目之间的间距相等。space-around：每个项目两边的间距相等。因此，项目之间的间距是项目与边框之间的间距的两倍。align-itemsalign-items属性定义项目如何在交叉轴上对齐。stretch（默认）：如果item没有设置高度或者设置为auto，它会占据整个容器的高度。flex-start：横轴起点对齐。flex-end：横轴末端对齐。center：横轴的中点对齐。baseline：项目中第一行文本的基线对齐方式。align-contentalign-content属性定义了多个轴的对齐方式。如果项目只有一个轴，则此属性无效。stretch（默认）：轴填充整个交叉轴。flex-start：对齐横轴的起点。flex-end：与交叉轴的末端对齐。center：与横轴的中点对齐。space-between：与横轴两端对齐，轴与轴之间的间隔均匀分布。space-around：每个轴两边的间距相等。因此，轴之间的距离是轴与框架之间的距离的两倍。弹性项目（自元素）属性orderflex-growflex-shrinkflex-basisflexalign-selforderorder属性定义项目的排序顺序。值越小，排名越高，默认为0。flex-growflex-grow属性定义了item的放大比例，默认为0，即如果还有剩余空间，则不放大。如果所有项目的flex-grow属性都为1，它们将平分剩余空间。如果一个项目的flex-grow属性为2，而其他项目的flex-grow为1，则前者将占用其他项目两倍的剩余空间。flex-shrinkflex-shrink属性定义了item的缩小比例，默认为1，即如果空间不足，item会收缩。如果所有item的flex-shrink属性都为1，当空间不足时，它们会按比例缩小。如果一个item的flex-shrink属性为0，其他item为1，前者在空间不足时不会收缩。负值对该属性没有影响。flex-basisflex-basis属性定义在分配多余空间之前项目在主轴（主要尺寸）上占据多少空间。浏览器根据这个属性计算主轴是否有多余空间。它的默认值为auto，即项目的原始大小。可以设置为与width或height属性相同的值（比如350px），那么item将占据一个固定的空间。flexflex属性是flex-grow、flex-shrink和flex-basis的简写，默认值：01auto。最后两个属性是可选的。该属性有两个快捷键值：auto(11auto)和none(00auto)。align-selfalign-self属性允许单个项目与其他项目具有不同的对齐方式，并且可以覆盖align-items属性。默认值：auto，表示继承父元素的align-items属性。如果没有父元素，相当于stretch。这个属性可以取6个值，除了auto，其他的和align-items属性完全一样。
