弹性盒子

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

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

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

浏览器支持：

弹性盒子由弹性容器（Flex container）和弹性元素（Flex item）组成

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

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

flex-direction

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

row: 左对齐，默认的排序方式。
row-reverse 右对齐，从后往前拍，最后一项排在最前面。
column：纵向排序。
column-reverse：反转纵向排序，从后往前拍，最后一项排在最上面。

justify-content 属性

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

• nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
• wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
• wrap-reverse -反转 wrap 排列。