GIF图解FlexBox

做过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的常用属性小编就介绍到这里，属性有些多，建议大家亲自试试看看效果，这样才能加深印象。

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