现在要实现子元素在父元素中的水平和垂直居中，传统的方式是如下，基于定位。.dad{位置：相对；}.son{位置：绝对；保证金：自动；顶部：0；右：0；底部：0；left:0;}而Flex只需要几行代码就搞定了，非常方便：.dad{display:flex;证明内容：居中；align-items:center}任何容器都可以指定为Flex布局。.box{display:flex;}内联元素也可以使用Flex布局：.box{display:inline-flex}以Webkit为核心的浏览器需要加上-webkit前缀。注意：布局设置为Flex后，子元素的float、clear、vertical-alian属性将失效。基本概念父容器设置为flex后，其所有子元素都会自动成为该容器的成员。孙子元素不行，需要继续在子元素上设置display:flex）Flex的基本概念就是容器和轴。容器包括外层的父容器和内层的子容器（也叫items，flexitem），轴包括Mainaxis和crossaxis。如图：容器默认有两个轴，水平主轴（mainaxis）和垂直横轴（crossaxis）。主轴的起始位置（与边框的交点）称为mainstart，结束位置称为mainend；交叉轴的起始位置称为crossstart，结束位置称为crossend。默认情况下，子容器（项目）沿主轴排列。单个项目在主轴上所占的空间称为主尺码，横轴所占的空间称为交叉尺码。flex布局主要涉及到12个属性（不包括display:flex），其中容器6个，子容器6个，但是平时用到的属性基本只有4个，父容器2个，子容器2个容器。作用于父容器的属性：flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content作用于子容器（item）的属性：orderflex-growflex-shrinkflex-basisflexalign-selfdetailed容器属性flex-directionflex-direction属性决定方向主轴和子容器（项目）的排列方向。.box{弹性方向：行|行反转|栏目|column-reverse;}可能的值：row（默认）：主轴是水平的，原点在左端。row-reverse：主轴水平，起点在右端。column：主轴垂直，起点为上边缘。column-reverse：主轴垂直，起点在底部。如图：flex-wrap默认情况下，项目排列在一条线上（也称为“轴”）。flex-wrap属性定义了轴线不适合时如何换行。.box{flex-wrap:nowrap|包装|wrap-reverse;}可能的值：nowrap（默认）：不换行wrap：换行，第一行在上面wrap-reverse：换行，第一行在flex-flowflex下面-flow属性是flex-direction和flex-wrap的简写特性。默认是：rownowrap.box{flex-flow:||}justify-contentjustify-content定义了在主轴上对齐的项目。.box{justify-content:flex-start|柔性端|中心|space-between|space-around;}可以取5个值，具体对齐方式和轴的方向有关。下面假设主轴是从左到右。flex-start（默认）：左对齐flex-end：右对齐center：居中space-between：两端对齐，项目之间的间距相等。space-around：每个项目两边的间距相等。因此，项目之间的间距是项目与边框之间的间距的两倍。如图：align-itemsalign-items属性定义了项目在横轴上的对齐方式：.box{align-items:flex-start|弹性端|中心|基线|strech}它可能需要5个值。具体对齐方式与交叉轴的方向有关，假设交叉轴是从上到下：flex-start：交叉轴起点对齐。flex-end：横轴末端对齐。center：横轴的中点对齐。baseline：项目中第一行文本的基线对齐方式。stretch（默认）：如果item没有设置高度或者设置为auto，它会占据整个容器的高度。如图：align-contentalign-content属性定义了多个轴的对齐方式。如果项目只有一个轴，则此属性无效。可能的值：flex-start：对齐到交叉轴的起点。flex-end：与交叉轴的末端对齐。center：与横轴的中点对齐。space-between：与横轴两端对齐，轴与轴之间的间隔均匀分布。space-around：每个轴两边的间距相等。因此，轴之间的距离是轴与框架之间的距离的两倍。stretch（默认）：轴填充整个交叉轴。如图：item属性orderorder属性定义了item的顺序。值越小，排列越高。默认值为0。.item{order:}flex-growflex-grow属性定义项目的缩放比例。默认为0，即如果有剩余空间，则不会放大。.item{flex-grow:/*default0*/}如果所有item的flex-grow属性都为1，他们将平分剩余的空间（如果有的话）。如果一个项目的flex-grow属性为2，而其他项目的flex-grow为1，则前者将占用其他项目两倍的剩余空间。flex-shrinkflex-shrink属性定义了item的缩小比例，默认为1，即如果空间不足，item会收缩。.item{flex-shrink:/*default1*/}如果所有item的flex-shrink属性都为1，当空间不足时，会按比例缩小。如果一个item的flex-shrink属性为0，其他item为1，前者在空间不足时不会收缩。负值对该属性没有影响。flex-basisflex-basis属性定义在分配多余空间之前项目在主轴（主要尺寸）上占据多少空间。浏览器根据这个属性计算主轴是否有多余空间。它的默认值为auto，即项目的原始大小。.item{弹性基础：<长度>|汽车;/*defaultauto*/}可以设置为与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。.item{对齐自我：自动|弹性启动|弹性端|中心|基线|stretch}这个属性可以取6个值，除了auto，其他的和align-items属性完全一样。Layoutinpracticebasicgridlayout最简单的网格布局是均匀分布。在容器中均匀分配空间。例如实现如图所示的布局：Html代码：cell1