前言Flex是FlexibleBox的缩写，意为“弹性布局”，用于为盒模型提供最大的灵活性。它在flexbox子元素之间提供强大的空间分布和对齐功能。Flex布局是当今布局的首选解决方案。本文将介绍flexbox的基本属性，体验Flex带来的便利。具有概念属性且采用Flex布局的元素称为flex容器，简称“容器”。它的所有子元素都会自动成为称为弹性项目或简称为“项目”的容器的成员。容器默认有两个轴：水平主轴和垂直横轴。主轴的起始位置（与边框的交点）称为mainstart，结束位置称为mainend；交叉轴的起始位置称为crossstart，结束位置称为crossend。默认情况下，项目沿主轴排列。单个item占用的主轴空间称为mainsize，单个item占用的横轴空间称为crosssize。使用Flex布局如果你想使用Flex布局，你可以在显示上设置属性。.flex-container{显示：-webkit-flex;webkit-corebrowserdisplay:flex;}内联元素采用Flex布局。.flex-container{显示：-webkit-inline-flex;webkit-core浏览器显示：inline-flex;}弹性盒容器属性（Flexcontainer）容器属性一共有6种。flex-direction：该属性决定了主轴的方向（Flex项目排列的方向）。flex-wrap：默认情况下，项目排列在一行（又名“轴”）上。flex-wrap属性定义了轴线不适合时如何换行。flex-flow：该属性是flex-direction属性和flex-wrap属性的简写形式，默认值为rownowrap。justify-content:属性定义项目在主轴上的对齐方式。align-items:属性定义项目如何在交叉轴上对齐。align-content：该属性定义了多个轴的对齐方式。如果项目只有一个轴，则此属性无效。flex-direction该属性通过设置弹性容器主轴的方向来指定弹性项目在弹性容器中的布局方式。它们可以在两个主要方向（水平行或垂直列）上布置。.flex-container{-webkit-flex-direction:行|行反转|栏目|列反转；弹性方向：行|行反转|栏目|列反转；}row（默认）：主轴为水平方向，从左端开始。row-reverse：主轴水平，起点在右端。column：主轴垂直，起点为上边缘。column-reverse：主轴垂直，起点在底部。flex-wrap最初的flexbox概念是在一行中为其项目设置一个容器。flex-wrap属性控制flex容器是将其项目布置在单行还是多行上，以及行的堆叠方向。.flex-container{-webkit-flex-wrap:nnowrap|包装|换行；弹性包装：nowrap|包装|换行；}nowrap（默认）：没有包装。wrap：换行符，第一行在上面。wrap-reverse：换行，第一行在下面。注意：wrap和wrap-reverse属性将在flex容器中颠倒。flex-flow这个属性是flex-direction和flex-wrap属性的简写。默认值：rownowrap.flex-container{-webkit-flex-flow:||<弹性包装>;弹性流：<弹性方向>||<弹性包装>;}flex-flow:rowwrap:justify-contentjustify-content属性沿flex容器当前行的主轴对齐flex项目。当一行中的所有弹性项目都不灵活或已达到其最大大小时，它有助于分配剩余的可用空间。.flex-container{-webkit-justify-content:flex-start|弹性端|中心|间隔|空间周围；证明内容：flex-start|弹性端|中心|around;}flex-start（默认值）：左对齐flex-end：右对齐center：居中space-between：两端对齐，item之间的间隔相等。space-around：每个项目两边的间距相等。因此，项目之间的间距是项目与边框之间的间距的两倍。align-itemsFlexitems可以在flex容器当前行的水平轴上对齐，类似于justify-content，但是是垂直方向。此属性设置所有弹性项目（包括匿名项目）的默认交叉轴的对齐方式。.flex-container{-webkit-align-items:flex-start|弹性端|中心|基线|拉紧;对齐项目：flex-start|弹性端|中心|基线|stretch;}flex-start:cross轴的起点对齐。flex-end：横轴末端对齐。center：横轴的中点对齐。baseline：项目中第一行文本的基线对齐方式。stretch（默认）：如果item没有设置高度或者设置为auto，它会占据整个容器的高度。align-contentalign-content当横轴上有额外空间时，此属性在flex容器内对齐flex容器的行justify-content，类似于单个项目在主轴内对齐的方式。如果项目只有一个轴，则此属性无效。.flex-container{-webkit-align-content:flex-start|弹性端|中心|间隔|环绕空间|拉紧;对齐内容：flex-start|弹性端|中心|间隔|环绕空间|stretch;}flex-start：与横轴起点对齐。flex-end：与交叉轴的末端对齐。center：与横轴的中点对齐。space-between：与横轴两端对齐，轴与轴之间的间隔均匀分布。space-around：每个轴两边的间距相等。因此，轴之间的距离是轴与框架之间的距离的两倍。stretch（默认）：轴填充整个交叉轴。弹性项目属性有六种主要类型。order：该属性定义项目的排序顺序。值越小，排名越高，默认为0。flex-grow：属性定义item的放大比例，默认为0，即如果有剩余空间，则不放大。flex-shrink：该属性定义item的缩小比例，默认为1，即空间不足时，item会收缩。flex-basis:属性定义了一个项目在分配多余空间之前在主轴上占据了多少空间。flex：该属性是flex-grow、flex-shrink和flex-basis的简写，默认值为01auto。最后两个属性是可选的。align-self：该属性允许单个项目与其他项目具有不同的对齐方式，并且可以覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性。如果没有父元素，相当于stretch。order这个简单的属性可用于重新排序Flex项目，而无需重新组织HTML代码。.flex-item{-webkit-order:<整数>;order:;}flex-grow如果所有弹性项目的值flex-grow与容器中所有项目的大小相同，则第二个弹性项目相对于其他弹性项目的大小占用更多空间。注意：负数无效。弹性项目{-webkit-flex-grow:;弹性增长：<数字>；/*default0*/}flex-shrinkflex-shrink参数指定了Flex收缩因子，它决定了分配空间时，flex项目相对于flex容器中其余的flex项目收缩多少。注意：负数无效。弹性项目{-webkit-flex-shrink:;弹性收缩：<数字>；/*default1*/}number1flex-shrink:2，其余为0时的效果：如果所有item的flex-shrink属性都为1，当空间不足时，会按比例缩小。如果一个item的flex-shrink属性为0，其他item为1，前者在空间不足时不会收缩。flex-basis该属性取与width和height属性相同的值，并指定flex项目在根据flex因子分配可用空间之前的初始主要维度。.flex-item{-webkit-flex-basis:自动|;弹性基础：<长度>|汽车;/*defaultauto*/}flex这个属性是flex-grow、flex-shrink和flex-basis属性的简写。它可以设置为自动（11自动）和无（00自动）等值。.flex-item{-webkit-flex:一个|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]flex:无|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]}flex:01100px:align-self这个align-self属性允许align-items覆盖单个flex项目的默认对齐方式（或由对齐方式指定）。.flex-item{-webkit-align-self:自动|弹性启动|弹性端|中心|基线|拉伸对齐自我：自动|弹性启动|弹性端|中心|基线|stretch;}这个属性可能取6个值，除了auto，其他和align-items属性完全一样。相关文章Flex布局教程：语法
