简而言之，传统的布局解决方案是基于盒子模型，依靠显示+位置+浮动来实现，不够灵活。2009年，W3C提出了一个新的解决方案——Flex，Flex是FlexibleBox的缩写，意思是“弹性布局”。Flex可以简单、完整、灵敏地实现各种页面布局。让我们从基础语法入手，一起感受Flex的魅力吧！1基本概念采用Flex布局的元素称为Flex容器（flexcontainer），简称“容器”。它的所有子元素都会自动成为称为弹性项目或简称为“项目”的容器的成员。容器默认有两个轴：水平主轴和垂直横轴。主轴的起始位置（与边框的交点）称为mainstart，结束位置称为mainend；交叉轴的起始位置称为crossstart，结束位置称为crossend。默认情况下，弹性项目沿主轴排列。单个item占用的主轴空间称为mainsize，单个item占用的横轴空间称为crosssize。Flex属性分为两部分，一部分作用于容器，称为容器属性，另一部分作用于项目，称为项目属性。下面我们将分节介绍。2Flex容器属性2.1flex容器定义的基本语法：.box{display:flex;/*orinline-flex*/}上面的写法定义了一个flex容器，根据不同的设置可以是block容器也可以是inline容器。这使得直接子代具有弹性上下文。2.2flex-directionflex-direction属性决定了主轴的方向（即项目排列的方向）。基本语法：.box{flex-direction:row|行反转|栏目|column-reverse;}row表示从左到右排列row-reverse表示从右到左排列列表示从上到下排列column-reverse表示从下到上排列演示程序：演示代码2.3flex-wrapBy默认情况下，Flex项目排成一行（也称为“轴”）。我们可以通过设置flex-wrap属性在新行中排列弹性项目。基本语法：.box{flex-wrap:nowrap|包装|wrap-reverse;}nowrap（默认）：所有flex项目排成一行wrap：所有flex项目排成多行，从上到下依次wrap-reverse：所有flex项目排成多行，并且演示程序从下到上依次为：演示代码观察上面的演示程序，了解不同属性的含义。单击演示区域以开始或停止演示。2.4flex-flowflex-flow属性是flex-direction属性和flex-wrap属性的简写形式。默认值是rownowrap基本语法：.box{flex-flow:<'flex-direction'>||<'flex-wrap'>}2.5justify-contentjustify-content属性定义项目在主轴上的对齐方式和额外空间的分配。基本语法：.box{justify-content:flex-start|弹性端|中心|间隔|环绕空间|space-evenly;}flex-start（默认）：排列flex-end：相对于终点线按顺序排列center：排列在中间space-between：物品均匀分布，第一个物品在起始线上，andlastitemisonthefinishlinespace-around:item均匀分布，每个item两边有相同的空格空白，相邻item之间的距离就是两个item之间的空格，space-evenly:项目均匀分布，所有项目之间的距离和项目与边框的距离相等演示程序：演示代码2.6align-itemsalign-items属性定义项目在交叉轴上的对齐方式。基本语法：.box{align-items:stretch|弹性启动|弹性端|中心|baseline;}stretch（默认）：沿横轴方向拉伸显示flex-start：按照横轴中心的起始线对齐itemflex-end：按照横轴中心的结束线对齐item:itemmiddlealignedinthedirectionofthecrossaxisbaseline:横轴方向根据第一行文本的基线对齐并额外分配空间，类似于justify-content对主轴。基本语法：.box{align-content:stretch|弹性启动|弹性端|中心|间隔|space-around;}stretch(default):拉伸显示Arrangeflex-end:相对于终点线按顺序排列center:排列在中间lastitemisonthefinishlinespace-around：item均匀分布，每个item的两侧有相同的空白，相邻item之间的距离就是两个item之间的空白以及demo程序：Demo代码3Flexitemproperties3.1order默认情况下，Flex项目是按照它们在代码中出现的顺序排列的。但是，order属性可以控制容器中项目的顺序。基本语法：.item{order:
