Flex布局Flex是flexiblebox的缩写，纯粹用于布局属性1flex和inline-flex任何容器都可以称为Flex布局，块级元素使用display:flex;;inline元素使用inline-flex容器采用Flex布局后，子元素的float、clear和verticle-align属性将失效。2基本概念采用Flex布局的元素称为flexcontainer容器。容器中的子元素自动成为flex容器的成员，称为flex-item。flex-item的排列方向为主轴：即flex-direction指定主轴是水平还是垂直。容器默认有水平主轴和垂直横轴。axis主轴：flex-item排列的方向为主轴crossaxis：垂直于主轴的为crossaxis的起点和终点位置mainaxis：mainstart和mainend的起点和终点位置crossaxis：crossstart和crossendflex-item在主轴上crossaxis占用的空间：mainsize和crosssize3flex容器有6个属性需要在flex容器上设置：flex-direction：行|行反转|栏目|列反转。默认值为rowrow（默认值）：主轴水平，flex-items水平排列，mainstart在左端row-reverse：主轴水平，flex-items水平排列，并且mainstart在右端column：主轴是垂直的，flex-item垂直排列，mainstart在上边缘column-reverse：主轴是垂直的，flex-item垂直排列，并且主要起点在下边缘flex-wrap:nowrap|包装|换行。默认情况下，弹性项目排列在一个轴上；flex-wrap属性定义了换行符的规则，如果它们不能排列在一个轴上。nowrap（默认）：不换行wrap：wrap，第一行在wrap-reverse：wrap之上，第一行在flex-flow之下：flex-direction和flex-wrap的简写，默认值为rownowrapflex-flow:&&justify-content:定义flex-item在主轴上的对齐方式main-axisjustify-content:flex-start|弹性端|中心|间隔|周围空间。这五个值与主轴的方向有关。flex-start（默认值）：左对齐；一个flex-item两边的间隔相等，相当于设置左右边距值相等。align-items:定义flex-item如何在横轴上对齐align-items:flex-start|弹性端|中心|基线|伸展。这五个值与横轴的方向有关。flex-start横轴起点对齐；baseline：flex-itemstretch第一行文本的基线对齐方式（默认值）：如果flex-item没有设置高度或者值为auto，则会占据容器的整个高度。align-content：如果容器中有多个轴（即wrap），定义主轴在横轴上的对齐方式。当只有一个轴时它不起作用。对齐内容：flex-start|弹性端|中心|间隔|环绕空间|stretchstretch（默认值）：轴被整个交叉轴覆盖space-between：与交叉轴的两端对齐，轴之间的间隔均匀分布space-around：每个轴的两侧间隔相等flex-start：横轴的起点及其4个flex-item属性。flex-item上设置的属性也是6：order:;：定义flex-item在主轴上的顺序。值越小排列越高，默认值为0。flex-grow:：定义flex-item在主轴上的放大比例。默认值为0：即使有剩余空间（宽度）也不放大。如果所有flex-item的flex-grow属性值为1，则表示它们共享剩余空间（如果有）如果一个flex-item属性值为2，则其余为1：前者占用两倍的空间后面的flex-shrink:：定义flex-item在主轴上的收缩比例。默认值为1，即如果空间不足，flex-item会收缩。如果所有flex-item的flex-shrink属性值为1，当空间不足时，flex-shrink为0的flex-item在空间不足时不会收缩。弹性基础：<长度>|auto：定义分配剩余空间前flex-item占用空间的主要大小。默认值为auto，表示弹性项目的原始大小。浏览器根据这个属性计算是否有多余的空间。如果宽高值固定为绝对长度单位（如350px），则flex-item占据固定空间。Flex属性：flex-grow、flex-shrink和flex-basis的简写，默认值为01auto两个快捷值：none表示（00auto）；auto表示(11auto)建议先使用属性值，而不是先写三个单独的属性（浏览器会自动计算相关值）align-self：允许单个flex-item与其他的有不同的对齐方式flex-items在横轴上，可以覆盖align-items的值align-items:auto|弹性启动|弹性端|中心|基线|strecth的默认值为auto：表示继承父元素的align-items属性。在没有父元素的情况下，相当于stretch阮一峰教程flex布局教程
