CSS3（14）弹性盒子

CSS3 弹性盒子(Flex Box)

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

CSS3 弹性盒子内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

代码：

<div style="display:flex;width:400px;height:250px;background:lightgrey;">

　　<div style="background:red;width:100px;height:100px;margin:10px;">flex item1</div>

　　<div style="background:red;width:100px;height:100px;margin:10px;">flex item2</div>

　　<div style="background:red;width:100px;height:100px;margin:10px;">flex item3</div>

</div>

效果：

　　

flex item1

　　

flex item2

　　

flex item3