CSS3 弹性盒子

CSS3 弹性盒子

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

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

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

CSS3 弹性盒子内容

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

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

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

flex-direction

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

语法

flex-direction: row | row-reverse | column | column-reverse

flex-direction的值有:
　　1.row：横向从左到右排列（左对齐），默认的排列方式。
　　2.row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
　　3.column：纵向排列。
　　4.column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

justify-content 属性

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

语法

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

CSS display 属性

　　属性值

　　　　none　　　　此元素不会被显示。

　　　block　　　　此元素将显示为块级元素，此元素前后会带有换行符。

　　　inline　　　　默认。此元素会被显示为内联元素，元素前后没有换行符。

　　　　inline-block　行内块元素。（CSS2.1 新增的值）

　　　list-item　　　此元素会作为列表显示。

align-content 属性

　　　align-content　　　　　　 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
　　stretch - 　　　　　　　　 默认。各行将会伸展以占用剩余的空间。
　　flex-start - 　　　　　　　 各行向弹性盒容器的起始位置堆叠。
　　flex-end -　　　　　　　   各行向弹性盒容器的结束位置堆叠。
　　center -　　　　　　　　  各行向弹性盒容器的中间位置堆叠。
　　space-between -　　　　  各行在弹性盒容器中平均分布。
　　space-around - 　　　　　各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。