介绍：Flex是FlexibleBox的缩写，意为“弹性布局”，用于为盒模型提供最大的灵活性。任何容器都可以指定为弹性布局。注意设置flex布局后，子元素的float、clear、vertical-align属性将失效。其基本概念采用了Flex布局的元素，称为Flex容器（flexcontainer），简称“容器”。它的所有子元素都自动成为容器的成员，称为弹性项目（flexitem），简称“项目”。容器默认有两个轴：水平主轴和垂直横轴。主轴的起始位置（与边框的交点）称为mainstart，结束位置称为mainend；交叉轴的起始位置称为crossstart，结束位置称为crossend。容器属性1.flex-directionflex-direction属性决定了主轴的方向（即item的排列方向）flex-direction:row|行反转|栏目|column-reverserow（默认值）：主轴水平，起点在左端。row-reverse：主轴水平，起点在右端。column：主轴垂直，起点为上边缘。column-reverse：主轴垂直，起点在底部。2.flex-wrapflex-wrap默认情况下，项目排列成一行（也称为“轴”）。flex-wrap属性定义了在轴不适合时如何换行。弹性包装：nowrap|包装|换行；nowrap（默认）：没有换行。wrap：换行符，第一行在上面。wrap-reverse：换行，第一行在下面。3.flex-flowflex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为rownowrap。弹性流：<弹性方向>||<弹性包装>;4.justify-contentjustify-content属性定义项目在主轴上的对齐方式。证明内容：flex-start|弹性端|中心|间隔|空间周围；flex-start（默认）：左对齐flex-end：右对齐center：居中space-between：两端对齐，item之间的间隔相等。space-around：每个项目两边的间距相等。因此，项目之间的间距是项目与边框之间的间距的两倍。5.align-itemsalign-items属性定义项目如何在交叉轴上对齐。对齐项目：flex-start|弹性端|中心|基线|拉紧;flex-start：对齐横轴的起点。flex-end：横轴末端对齐。center：横轴的中点对齐。baseline：项目中第一行文本的基线对齐方式。stretch（默认值）：如果item没有设置高度或者设置为auto，它会占据整个容器的高度。6.align-contentalign-content属性定义了多个轴的对齐方式。如果项目只有一个轴，则此属性无效。对齐内容：flex-start|弹性端|中心|间隔|环绕空间|拉紧;flex-start：对齐到横轴的起点。flex-end：与交叉轴的末端对齐。center：与横轴的中点对齐。space-between：与横轴两端对齐，轴与轴之间的间隔均匀分布。space-around：每个轴两边的间距相等。因此，轴之间的距离是轴与框架之间的距离的两倍。stretch（默认）：轴填充整个交叉轴。Item属性1.orderorder属性定义了项目排列的顺序。值越小排列越高，默认为0。2.flex-growflex-grow属性定义了item的缩放比例，默认为0，即如果有剩余空间，则将不会被放大。如果所有项目的flex-grow属性都为1，它们将平分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，而其他项目的flex-grow为1，则前者将占用其他项目两倍的剩余空间。*可用于实现两点和三点布局3.flex-shrinkflex-shrink属性定义item的收缩比例，默认为1，即如果空间不足，item会收缩。如果所有item的flex-shrink属性都为1，当空间不足时，它们会按比例缩小。如果一个item的flex-shrink属性为0，其他item为1，前者在空间不足时不会收缩。负值对该属性没有影响。4.flex-basisflex-basis属性定义了item在分配多余空间之前占用的主轴空间（mainsize）。浏览器根据这个属性计算主轴是否有多余空间。它的默认值为auto，即项目的原始大小。可以设置为与width或height属性相同的值（比如350px），那么item将占据一个固定的空间。5.flexflex属性是flex-grow、flex-shrink和flex-basis的简写，默认值为01auto。最后两个属性是可选的。该属性有两个快捷键值：auto(11auto)和none(00auto)。建议先使用这个属性，而不是分别写三个单独的属性，因为浏览器会计算相关的值。6.align-selfalign-self属性允许单个项目与其他项目有不同的对齐方式，并且可以覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性。如果没有父元素，相当于stretch。
