css3弹性盒布局（一）

css3引入了新的盒模型-Box模型，该模型定义了一个盒子在其他盒子中分布方式以及如何处理可用的空间，使用该模型可以很轻松地创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。

一、启动弹性盒模型

为包含子对象的容器对象设置display属性即可，用法如下：

display:box

这里说一下display属性值：box、inline-box、flexbox、inline-flexbox、flex、inline-flex

说明：

box：将对象作为弹性伸缩盒显示，伸缩盒最老版本。

inline-box：将对象作为内联块级弹性伸缩盒显示。伸缩盒最老版本。

flexbox：将对象作为弹性伸缩盒显示，伸缩盒过渡版本。

inline-box：将对象作为内联块级弹性伸缩盒显示。伸缩盒过渡版本。

flex：将对象作为弹性伸缩盒展示。伸缩盒最新版本。

inline-flex：将对象作为内联块级伸缩盒展示。伸缩盒最新版本。

二、最新版本说明

弹性伸缩盒由伸缩容器和伸缩项目组成，通过设置元素的display属性为flex或inline-flex可以得到一个伸缩容器。语法如下：

display：flex|inline-flex

注意：css的cloumns属性在伸缩容器中没有效果。同时float、clear和vertical-align属性在伸缩项目中也没有效果。

三、伸缩方向设定

使用flex-direction属性可以定义伸缩方向，它适用于伸缩容器（也就是伸缩容器的父元素），语法如下：

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

属性值说明：

row：默认值，在ltr排版方式下从左向右排列，在rtl排版方式下从右向左排列。

row-reverse：与row排列方向相反。

column：类型于row，只不过是从上到下排列。

column-reverse：类似于row-reverse，只不过是从上到下排列。