旧盒

• 2009 年版本（老版本）： display:box;
• 2011 年版本（过渡版本）： display: flexbox;
• 2012 年版本（最新稳定版本）： display: flex;

盒布局模型

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

启动盒布局，只需在拥有子元素的盒子的 display 属性值为 box （或 inline-box ）即可：

display: box;

盒布局由两部分构成：父容器和子容器。父容器通过 display:box 启动盒布局模型功能，并使用如下定义子容器的显示功能；子容器通过 box-flex 属性定义布局宽度，指定如何分配父容器的宽度：

• box-orient ： 定义父容器中子容器的排列方式，是水平还是垂直，取值包括 horizontal 、 vertical 、 inline-axis 、 block-axis 、 inherit
• box-direction ： 定义父容器中子容器的排列方式，取自包括 normal 、 reverse 、 inherit
• box-align ： 父容器中子容器的垂直对齐方式，取值包括 start 、 end 、 center 、 baseline 、 stretch
• box-pack ： 父容器中子容器的水平对齐方式，取值包括 start 、 end 、 center 、 justify

定义宽度 （容器内盒子）

使用盒布局时只需要使用 box-flex （子元素配置）属性，就可以把默认的布局变成盒布局了。 WebKit 支持 -webKit-box-flex 私有属性， Mozilla Gecko 支持 -moz-box-flex 私有属性， Presto 引擎支持 box 属性。 IE 浏览器不支持该属性。

box-flex:;

默认情况下，盒子不具有弹性。设置为盒子后具有弹性，且属性值至小为 1 ，如不具有弹性，则尽可能地宽，使内容可见，且没有任何溢出，其大小由 width 、 height 属性值，或者 min-height 、 min-width 、 max-height 、 max-width 属性值来决定。

若为弹性，则计算公式为：

• 具有大小声明（ width 、 height 、 min-width 、 min-height 、 max-width 、 max-height ）
• 父盒子大小和剩余可利用空间

即子盒子大小等于父盒子大小乘以其 box-flex 在所有盒子 box-flex 总和中的百分比。用公式 :

（子盒子大小） =（ 父盒子大小 ）\*（ 子盒子的 box-flex ） / （所有盒子的 box-flex 之和）

#container {
  /*定义弹性盒布局样式*/
  display: -moz-box;
  display: -webkit-box;
}
#left-sidebar {
  width: 200px;
  padding: 20px;
  background-color: orange;
}
#contents {
  /*定义中间列宽度为自适应显示*/
  -moz-box-flex: 1;
  -webkit-box-flex: 1;
  padding: 20px;
  background-color: yellow;
}
#right-sidebar {
  width: 200px;
  padding: 20px;
  background-color: limegreen;
}
#left-sidebar,
#contents,
#right-sidebar {
  /*定义盒样式\*/
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

box-direction

属性用于设置或检索弹性盒模型对象的子元素的排列顺序是否反转。

box-direction: normal | reverse | inherit;

「默认情况下， box-direction 属性的值为 normal 。如下对 box-direction 属性的常用取值进行了说明。

• normal ：设置弹性盒模型对象的子元素按正常顺序排列。如果盒子元素的 box-orient 属性值为 horizontal ，则其包含的子元素按照从左到右的顺序显示；如果盒子元素的 box-orient 属性值为 vertical ，则其包含的子元素按照从上到下的顺序显示
• reverse ：反转弹性盒模型对象的子元素的排列顺序
• inherit ：继承上级元素的顺序

定义顺序 （容器内盒子）

box-direction 属性可以改变盒子内部元素的流动顺序，而 box-ordinal-group 属性能够设置或者检索弹性盒模型对象的每个子元素在盒子中的显示位置。 box-ordinal-group 属性的基本语法如下：

box-ordinal-group: <integer>;

在 box-ordinal-group 属性的语法中， integer 是一个自然数，从 1 开始，用来定义子元素的显示顺序。子元素的分布将根据这个属性值从小到大进行排列，即数值较小的元素显示在数值较大的元素前面。

默认情况下，子元素将根据元素的位置进行排列。如果没有指定 box-ordinal-group 属性值的子元素，则其序号默认都为 1 ，并且序号相同的元素将按照它们在文档中加载的顺序进行排列。另外，相同数值的元素，它们的显示顺序取决于它们的代码顺序。

定义顺序，使用 box-ordinal-group 改变个元素的顺序，该属性使用一个表示序号的整数数值，浏览器在显示时按顺序加载。

WebKit 支持 -webKit-box-ordinal-group 私有属性， Mozilla Gecko 支持 -moz-box-ordinal-group 私有属性， Presto 引擎支持标准 box 属性。 IE 浏览器不支持该属性。

#container {
  display: -moz-box;
  display: -webkit-box;
  display: box;
}
#left-sidebar {
  -moz-box-ordinal-group: 3;
  -webkit-box-ordinal-group: 3;
  box-ordinal-group: 3;
  width: 200px;
  padding: 20px;
  background-color: orange;
}
#contents {
  -moz-box-ordinal-group: 1;
  -webkit-box-ordinal-group: 1;
  box-ordinal-group: 1;
  -moz-box-flex: 1;
  -webkit-box-flex: 1;
  box-flex: 1;
  padding: 20px;
  background-color: yellow;
}
#right-sidebar {
  -moz-box-ordinal-group: 2;
  -webkit-box-ordinal-group: 2;
  box-ordinal-group: 2;
  width: 200px;
  padding: 20px;
  background-color: limegreen;
}
#left-sidebar,
#contents,
#right-sidebar {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

定义方向 （容器）

伸缩盒（ Flexible Box ）能让普通容器（通常是块级元素）变为伸缩容器，使其有能力改变子元素的尺寸、顺序和对齐方式。当容器大小发生变化时，子元素的大小会被自动调整，原先占据的空间会按比例缩放，以最优的方式填充可用空间。伸缩盒是 CSS3 引入的一种全新布局模式，用它可以轻松解决移动端屏幕尺寸带来的布局问题，还能实现一些棘手的视觉效果，例如多列等高、垂直居中等。有一点需要注意，那就是伸缩容器中的子元素不能再使用 float 和 vertical-align 属性。

box-orient 属性用于设置或者检索弹性盒模型对象的子元素的排列方式，但是使用弹性盒子模型时，用户需要先把父容器的 display 属性设置为 box 或者 inline-box 。

box-orient: horizontal | vertical | inline-axis | block-axis;

如下对 box-orient 属性的简单取值进行了说明。

• horizontal ：设置弹性盒模型对象的子元素为水平排列，即盒子元素从左到右在一条水平线上显示它的子元素
• vertical ：设置弹性盒模型对象的子元素为纵向排列，即盒子元素从上到下在一条垂直线上显示它的子元素
• inline-axis ：盒子元素沿着内联轴显示它的子元素
• block-axis ：盒子元素沿着块轴显示它的子元素

inline-axis 属性和 block-axis 属性是根据书写模式来决定的。例如，在英文关键字中包括垂直、水平和地图模式，因此内联轴和块轴也会不同。一般情况下， horizontal 和 vertical 属性最为常用。

使用 box-orient 来指定多个元素的排列方向，加入 属性后，定义属性值为 vertical ，则顺序按照垂直方向排列。

WebKit 支持 -webKit-box-orient 私有属性， Mozilla Gecko 支持 -moz-box-orient 私有属性， Presto 引擎支持标准 box 属性。 IE 浏览器不支持该属性。

#container {
  display: -moz-box;
  display: -webkit-box;
  -moz-box-orient: vertical;
  -webkit-box-orient: vertical;
}
#left-sidebar {
  -moz-box-ordinal-group: 3;
  -webkit-box-ordinal-group: 3;
  width: 200px;
  padding: 20px;
  background-color: orange;
}
#contents {
  -moz-box-ordinal-group: 1;
  -webkit-box-ordinal-group: 1;
  -moz-box-flex: 1;
  -webkit-box-flex: 1;
  padding: 20px;
  background-color: yellow;
}
#right-sidebar {
  -moz-box-ordinal-group: 2;
  -webkit-box-ordinal-group: 2;
  width: 200px;
  padding: 20px;
  background-color: limegreen;
}
#left-sidebar,
#contents,
#right-sidebar {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

自适应

配置容器的 box-orient: horizontal 即可使子元素自适应

使用盒模型时，元素大小（包括宽和高）具有自适应性，即元素的宽度和高度可以根据排列的方向改变而改变。

<head>
  <style>
    #container {
      display: -moz-box;
      display: -webkit-box;
      border: solid 1px red;
      -moz-box-orient: vertical;
      -webkit-box-orient: vertical;
      width: 800px;
      height: 500px;
    }
    #text-a {
      background-color: orange;
    }
    #text-b {
      background-color: yellow;
    }
    #text-c {
      background-color: limegreen;
    }
    #text-a,
    #text-b,
    #text-c {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      font-size: 1.5em;
      font-weight: bold;
      height: 150px;
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="text-a">列1</div>
    <div id="text-b">列2</div>
    <div id="text-c">列3</div>
  </div>
</body>

消除空白

将盒子中 div 的 box-flex 设置就可以改变原始宽高，使盒子自适应。

定义对齐方式（定义在容器上）

在盒布局中，可以使用 box-pack 属性及 box-align 属性来指定元素中的文字、图像及子元素水平方向或垂直方向的对齐方式。

WebKit 支持 -webKit-pack 和 -WebKit-align 私有属性， Mozilla Gecko 支持 -moz-box-pack 和 -moz-box-align 私有属性， Presto 引擎支持标准属性。 IE 浏览器不支持该属性。

box-pack 和 box-align 属性值说明：

• start : 排列方式 horizontal 。针对 box-pack 属性，表示左对齐，文字、图像或子元素被放置在元素的最左边显示；针对 box-align 属性，表示顶部对齐，文字、图像或子元素被放置在元素最顶部显示
• center : 排列方式 horizontal 。针对 box-pack 属性，表示中对齐，文字、图像或子元素被放置在元素的中部显示；针对 box-align 属性，表示中部对齐，文字、图像或子元素被放置在元素中部显示
• end : 排列方式 horizontal 。针对 box-pack 属性，表示右对齐，文字、图像或子元素被放置在元素的最右边显示；针对 box-align 属性，表示底部对齐，文字、图像或子元素被放置在元素最底部显示
• start : 排列方式 vertical 。针对 box-align 属性，表示左对齐，文字、图像或子元素被放置在元素的最左边显示；针对 box-pack 属性，表示顶部对齐，文字、图像或子元素被放置在元素最顶部显示

• center : 排列方式 vertical 。针对 box-align 属性，表示中对齐，文字、图像或子元素被放置在元素的中部显示；针对 box-pack 属性，表示中部对齐，文字、图像或子元素被放置在元素中部显示

• end : 排列方式 vertical 。针对 box-align 属性，表示右对齐，文字、图像或子元素被放置在元素的最右边显示；针对 box-pack 属性，表示底部对齐，文字、图像或子元素被放置在元素最底部显示

在 CSS 3 之前的版本，只要使用 text-align 属性就可以了；如果是想要文字垂直居中，由于 div 元素不能使用 vertical-align 属性的，所以很难办到。在 CSS 3 中，只要让 DIV 元素使用 box-align 属性（排列方向默认为 horizontal ），文字就可以垂直居中了。

div#container {
  display: -moz-box;
  display: -webkit-box;
  -moz-box-align: center;
  -webkit-box-align: center;
  -moz-box-pack: center;
  -webkit-box-pack: center;
  width: 300px;
  height: 200px;
  background-color: pink;
}
#text-a {
  background-color: orange;
}
#text-b {
  background-color: yellow;
}
#text-c {
  background-color: limegreen;
}