做过Web开发的前端人员都很清楚，传统的页面布局基于盒子模型，对于一些伸缩性的布局，处理起来很麻烦。
Flexbox(弹性盒子)是CSS3中新加的一种布局模式，相比传统浮动模式来说，更加简单易用。在移动端浏览器的支持几乎是没题的。
今天小编将用GIF的形式给大家介绍，希望大家能快速掌握。
Display: Flex
如上图所示，每个色块div的默认属性都是block，每个色块都会独占一行。block——此属性将显示为块级元素，此元素前后会带有换行符。
使用弹性盒子后的CSS代码：
#container { display: flex;}
Flex Direction
Flexbox布局由伸缩容器和伸缩项目组成，任何一个元素都可以指定为Flexbox布局。Flexbox使用伸缩布局模型来排版，与传统布局不一样，它按照伸缩流的方向布局，如下图：
下来看看下段代码：
#container { display: flex; flex-direction: column;}
除了row,colum属性，还有row-reverse，cloumn-reverse,具体效果如下图：
Justify Content
Justify-content用来定义伸缩项目沿主轴线(main-axis)的对齐方式，示例代码如下
#container { display: flex; flex-direction: row; justify-content: flex-start;}
所有相关属性如下，具体效果请看下图：
- Flex-start
- Flex-end
- Center
- Space-between
- Space-around
Align Items
该属性用来定义伸缩项目在伸缩容器交叉轴上(cross axis)的对齐方式。
所有相关属性如下，具体效果请查看下图：
- flex-start
- flex-end
- center
- stretch
- baseline
关于stretch属性，伸缩项目是不能设置高度的，否则会覆盖stretch属性。
为了更好的演示在主轴和交叉轴的效果，通过结合 justify-content 与 align-items 两个属性，具体效果如下：
Align Self
该属性用来设置单独的伸缩项在交叉轴轴上的对齐方式，会覆盖默认的对齐方式，具体代码如下：
#container { align-items: flex-start;}.square#one { align-self: center;}
结束语
关于Flexbox的常用属性小编就介绍到这里，属性有些多，建议大家亲自试试看看效果，这样才能加深印象。
更多精彩内容，请微信关注“前端达人”公众号！