GIF图解FlexBox-白红宇

做过Web开发的前端人员都很清楚，传统的页面布局基于盒子模型，对于一些伸缩性的布局，处理起来很麻烦。

Flexbox(弹性盒子)是CSS3中新加的一种布局模式，相比传统浮动模式来说，更加简单易用。在移动端浏览器的支持几乎是没题的。

今天小编将用GIF的形式给大家介绍，希望大家能快速掌握。

如上图所示，每个色块div的默认属性都是block，每个色块都会独占一行。block——此属性将显示为块级元素，此元素前后会带有换行符。

使用弹性盒子后的CSS代码：

#container { display: flex;}复制代码

Flexbox布局由伸缩容器和伸缩项目组成，任何一个元素都可以指定为Flexbox布局。Flexbox使用伸缩布局模型来排版，与传统布局不一样，它按照伸缩流的方向布局，如下图：

下来看看下段代码：

#container { display: flex; flex-direction: column;}复制代码

除了row,colum属性，还有row-reverse，cloumn-reverse,具体效果如下图：

Justify-content用来定义伸缩项目沿主轴线（main-axis）的对齐方式，示例代码如下

#container { display: flex; flex-direction: row; justify-content: flex-start;}复制代码

所有相关属性如下，具体效果请看下图：

该属性用来定义伸缩项目在伸缩容器交叉轴上（cross axis）的对齐方式。

所有相关属性如下，具体效果请查看下图：

关于stretch属性，伸缩项目是不能设置高度的，否则会覆盖stretch属性。

为了更好的演示在主轴和交叉轴的效果，通过结合 justify-content 与 align-items 两个属性，具体效果如下：

该属性用来设置单独的伸缩项在交叉轴轴上的对齐方式，会覆盖默认的对齐方式，具体代码如下：

#container { align-items: flex-start;}.square#one { align-self: center;}复制代码

关于Flexbox的常用属性小编就介绍到这里，属性有些多，建议大家亲自试试看看效果，这样才能加深印象。

更多精彩内容，请微信关注”前端达人”公众号！