本文由云+社区发布Flex是FlexibleBox的缩写，意思是“弹性布局”，是CSS3的一种布局方式。通过Flex布局，可以优雅的解决很多CSS布局问题。下面将分别介绍容器的6个属性和项目的6个属性。每个属性都会附上效果图，具体实现代码会以github路径的形式更新在这里。1、对于浏览器的支持，可以点击查看各个浏览器的兼容性。2.容器的属性注意设置Flex布局后，子元素的float、clear、vertical-align属性将失效。容器有6个属性，分别是：flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content(1)flex-direction属性：作用：控制主轴的方向flex-direction:row|行反转|栏目|列-反转；默认值：row(2)flex-wrap属性：功能：默认情况下，项目排列在一条线上（也称为“轴”）。flex-wrap属性定义了轴线不适合时如何换行。弹性包装：nowrap|包装|换行；默认值：nowrap(3)flex-flow属性作用：该属性是flex-direction属性和flex-wrap属性的简写形式默认值：rownowrap(4)justify-content属性作用：定义项目在其上的对齐方式主轴justify-content:flex-start|弹性端|中心|间隔|空间周围；默认值：flex-start(5)align-items属性作用：定义项目如何在横轴上对齐。对齐项目：flex-start|弹性端|中心|基线|stretch默认值：flex-start注意：如果align-items是stretch，如果想看到每个flex-item覆盖整个横轴，需要设置所有flex-item的高度：height:auto，否则达不到效果。(6)align-content属性定义了多轴的对齐方式。如果项目只有一个轴，则此属性无效。对齐内容：flex-start|弹性端|中心|间隔|环绕空间|拉紧;默认值：stretchflex-start：对齐到横轴的起点。flex-end：与交叉轴的末端对齐。center：与横轴的中点对齐。space-between：与横轴两端对齐，轴与轴之间的间隔均匀分布。space-around：每个轴两边的间距相等。因此，轴之间的距离是轴与框架之间的距离的两倍。stretch：轴占据整个横轴。3、项目的属性项目的属性有6个，分别是：orderflex-growflex-shrinkflex-basisflexalign-self(1)order属性：作用：定义项目的顺序，值越小，排列越高。默认值：0(2)flex-grow属性作用：如果有剩余空间，则项目规模扩大。相当于把剩余的空间按照这个比例分配给每个项目。默认值：0（不放大）（3）flex-shrink属性作用：flex-shrink：如果空间不足，item的“缩小比例”。0表示空间不足时，不收缩。默认值：1负值对该属性无效(4)flex-basis属性作用：定义项目在主轴方向所占空间的初始值。默认值：auto（item的原始大小）（5）flex属性作用：是flex-grow、flex-shrink、flex-basis属性的缩写形式；弹性：无|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]注：几个常用的缩写；弹性：自动；===弹性：11自动；弹性：无；===弹性：00自动；弹性：初始；===弹性：01自动；弹性：<数字>；===flex:
