CSS3（14）弹性盒子

CSS3 弹性盒子(Flex Box)

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

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

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

CSS3 弹性盒子内容

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

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

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

代码：

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

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

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

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

</div>

效果：(这里不知道为什么左边空出来那么多？)

　　

flex item1

flex item2

flex item3

flex-direction

flex-direction 属性指定了弹性子元素在父容器中的位置。

flex-direction的值有:

• row：横向从左到右排列（左对齐），默认的排列方式。
• row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
• column：纵向排列。
• column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

justify-content 属性

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

justify-content: flex-start | flex-end | center | space-between | space-aroun