在flex容器中默认有两个轴，水平主轴和垂直横轴。这是默认设置。当然，垂直方向可以改为主轴，水平方向可以改为Cross轴，在容器中，每个单元块称为一个flexitem，每个flexitem占据主轴的空间作为main尺寸，占据交叉轴的空间作为交叉尺寸。一个flex容器首先需要指定一个容器来实现flex布局。任何容器都可以作为flex布局放在上面，这样容器中的元素就可以使用flex进行布局。.container{显示：flex|inline-flex;}flex生成一个块状的flex容器盒，inline-flex生成一个inlineflex容器盒。可以在容器上设置以下六个属性：弹性方向：行|行反转|栏目|column-reverse;}flex-direction决定了主轴的方向，默认值为row。row：主轴为水平方向，起点在左端；row-reverse：主轴是水平的，起点在右边column：主轴是垂直的，起点在上端column：主轴是垂直的，起点在低端flex-wrap.container{display:flex;弹性包装：nowrap|经线|wrap-reverse;}flex-wrap判断容器中的项目是否可以换行，默认值为nowrap。nowrap:不换行，项目大小会相应调整wrap:超出换行，第一行在上面弹性流：<弹性方向>||;}flex-flow是flex-direction和flex-wrap的缩写，默认值为rownowrap。justify-content.container{显示：flex;证明内容：flex-start|弹性端|中心|间隔|space-around;}justify-content定义item在主轴上的对齐方式，默认值为flex-startflex-start：左对齐flex-end：右对齐center：居中space-between：两端对齐，其余空间被划分为间隙space-around：每一项两边的间隔相等align-items.container{display:flex;对齐项目：flex-start|弹性端|中心|基线|stretch;}align-items定义item在横轴上的对齐方式，默认值为stretchstretch：如果item没有高度或者是auto，会占据整个容器的高度flex-start：对齐横轴起点flex-end：对齐横轴终点center：对齐中点baseline：对齐item第一行文本的基线align-content.container{display:flex;对齐内容：flex-start|弹性端|中心|间隔|环绕空间|stretch;}align-content：定义多个轴的对齐方式，如果item只有一个轴，那么这个属性将不起作用。例如，flex-wrap:nowrap；容器只有一个轴，align-content将不起作用。默认值为拉伸。当有多个轴时，多个轴在垂直方向的布局。flexitem在item上定义了以下6个属性：orderflex-basisflex-growflex-shrinkflexalign-selfforder.item{order:;}order定义了item在容器中的排列顺序，值越小，排列越高，默认值为0。flex-basis.item{flex-basis:<长度>|auto;}flex-basis定义在分配多余空间之前，item占据主轴的空间。浏览器根据这个属性计算主轴是否有多余的空间。默认值为auto，即项目本身的宽度和高度。flex-basis需要与flex-grow和flex-shrink结合使用才能有效。flex-grow.item{flex-grow:;}flex-grow定义item的放大比例，默认值为0，即如果还有剩余空间，则不放大。当所有项目的flex-grow值为1时，它们将平分剩余空间。如果一个项目的flex-grow值为2而另一个项目的值为1，则前者将占用其他项目两倍的剩余空间。如果所有item的flex-basis值排列后没有足够的空间，flex-wrap:nowrap,flex-grow此时不起作用。flex-shrink.item{flex-shrink:;}flex-shrink定义了item的缩小比例，默认值为1，如果空间不够，且所有item的值为1，则全部items会按比例缩小，如果一个item的flex-shrink属性为0，其他item为1，则前者不会收缩。flex.item{flex:auto|无|<弹性增长>|<弹性收缩>|;}flex是flex-grow、flex-shrink、flex-basis三个属性的缩写。auto：三个属性的值为11autonone：三个属性的值为00autoalign-self.item{align-self:auto|弹性启动|弹性端|中心|基线|stretch;}alg-self允许单个项目与其他项目具有不同的对齐方式。单个项目的alg-self将覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性。
