CSS3 弹性盒布局模型和布局原理

       在CSS 3中，CSS Flexible Box模块为一个非常重要的模块，该模块用于以非常灵活的方式实现页面布局处理。

       虽然可以使用其他CSS样式属性来实现页面布局处理，但是如果使用CSS Flexible Box模块中定义的弹性盒布局技术，可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各局部区域的显示方式，即实现非常灵活的布局处理。

       引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。比如当容器尺寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范围。弹性盒布局是与方向无关的。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。

      在进行详细 解释这个模型之前，我们先了解一下弹性盒模型的几个属性，稍微看一下就好，后面会解释具体的用法。

1）box-orient：用来确定子元素的方向。是横着排还是竖着走。

2）box-direction：用来确定子元素的排列顺序，即是否反转。

3）box-pack：用来确定子元素的左右对齐方式。

4）box-align：用来确定子元素的上下对齐方式。

5）box-flex：用来确定子元素如何分配其剩余元素。子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和。

5）box-lines：用来决定子元素是可以换行显示。

6）box-flex-group：用来确定子元素的所属组。

7）box-ordinal-group：用来确定子元素的显示顺序。

　  接下来开始通过一个示例页面开始学习弹性盒布局。该示例页面中的body元素中的代码如下所示。

<div id="main">    <div class="content">        <section>            <h1>section 1</h1>            <p>示例文字</p>        </section>        <section>            <h1>section 2</h1>            <p>示例文字</p>        </section>        <section>            <h1>section 3</h1>            <p>示例文字</p>        </section>        <section>            <h1>section 4</h1>            <p>示例文字</p>        </section>    </div>    <div class="content">        <section>            <h1>section 5</h1>            <p>示例文字</p>            <section>                <h1>section 6</h1>                <p>示例文字</p>            </section>            <section>                <h1>section 7</h1>                <p>示例文字</p>            </section>            <section>                <h1>section 8</h1>                <p>示例文字</p>            </section>    </div>    <div class="content">        <section>            <h1>section 9</h1>            <p>示例文字</p>        </section>        <section>            <h1>section 10</h1>            <p>示例文字</p>        </section>        <section>            <h1>section 11</h1>            <p>示例文字</p>        </section>        <section>            <h1>section 12</h1>            <p>示例文字</p>        </section>    </div></div>
      为了更清晰看清楚结构，具体的样式代码如下：
        #main {            border: 2px solid #382aff;            padding: 1em;        }        .content {            border: 2px solid #ff2834;            padding: 1em;        }        div {            border: 2px solid #73ff58;            padding: 1em;        }      页面显示结果如下：
1、使用弹性盒布局 dispaly:box
      接下来，对示例页面使用弹性盒布局：
       弹性盒布局的指定方法为：对需要布局的元素的容器元素使用display: -moz-box;display: -webkit-box;display: box;样式属性，因为这个属性需要兼容各种浏览器，所以需要写前缀进行兼容性书写。在CSS Flexible Box模块中，该容器元素中的每一个元素均被称为“Flex item”，将该容器元素称为“Flex container”。
　　弹性盒布局方式与使用float等样式属性进行的布局方式的一个主要区别为，当使用float等样式属性时，需要对容器中每一个元素指定样式属性，当使用弹性盒布局时，只需对容器元素指定样式属性。
　　接下来，我们首先对所有样式类名为content的div元素使用弹性盒布局，这些div元素的容器元素为id属性值为main的div元素，修改该元素的样式代码如下所示：
       #main {            border: 2px solid #382aff;            padding: 1em;            display: -moz-box;            display: -webkit-box;            display: box;        }
       在浏览器中打开示例页面，页面中所有样式类名为content的div元素的排列方式被修改为横向排列，如下图所示。
2、设置元素排列顺序 box-direction
　　可以通过box-direction样式属性的使用来控制容器中所有子元素的排列顺序，可指定值如下所示。
normal | reverse | inherit
      其中normal是默认值，表示按照正常顺序排列。所谓正常顺序，就是我们看书写文字的顺序，从左往右，由上至下，先出现的元素，就上面或是左边。而reverse表示反转。　　
     修改id属性值为main的div元素的样式代码如下所示：
        #main {            border: 2px solid #382aff;            padding: 1em;            display: -moz-box;            display: -webkit-box;            display: box;            -moz-box-direction: reverse;            -webkit-box-direction: reverse;            box-direction: reverse;        }
       在浏览器中打开示例页面，页面中所有样式类名为content的div元素的排列方式被修改为从容器元素，即id属性值为main的div元素的右端开始横向反向排列，如下图所示。
　  接下来首先恢复所有样式类名为content的div元素的排列方式为横向正向排列，修改id属性值为main的div元素的样式代码如下所示：
        #main {            border: 2px solid #382aff;            padding: 1em;            display: -moz-box;            display: -webkit-box;            display: box;        }
　　然后对所有样式类名为content的div元素指定box-direction: reverse;样式属性，代码如下所示：
        .content {            border: 2px solid #ff2834;            padding: 1em;            display: -moz-box;            display: -webkit-box;            display: box;            -moz-box-direction: reverse;            -webkit-box-direction: reverse;            box-direction: reverse;        }
　　在浏览器中打开示例页面，页面中所有content的div元素的所有section子元素的排列方式被修改为纵向反向排列（不包含section子元素中的section孙元素），如下图所示。
3、设置元素排列方式 box-orient
      可以通过box-orient来确定容器中子元素的方向。是横着排还是竖着走。可选的值有：
horizontal | vertical | inline-axis | block-axis | inherit
      其中，inline-axis是默认值。且horizontal与inline-axis的表现似乎一致的，让子元素横排；而vertical与block-axis的表现也是一致的，让元素纵列。
     然后对所有样式类名为content的div元素指定-moz-box-orient:vertical; -webkit-box-orient:vertical; box-orient:vertical; 样式属性，代码如下显示：
        .content {            border: 2px solid #ff2834;            padding: 1em;            display: -moz-box;            display: -webkit-box;            display: box;            -moz-box-orient:vertical;            -webkit-box-orient:vertical;            -o-box-orient:vertical;            box-orient:vertical;        }
　  在浏览器中打开示例页面，页面中所有content的div元素的所有section子元素的排列方式被修改为纵向排列（不包含section子元素中的section孙元素），如下图所示。
4、设置元素宽度 box-flex
       接下来首先介绍如何设置被横向排列的每一个元素的宽度。
　　可以通过flex属性值的使用使所有子元素的总宽度等于容器宽度。
　　接下来通过将所有样式类名为content的div元素的flex属性值设置为1的方法使所有样式类名为content的div元素的总宽度等于容器元素，即id属性值为main的div元素的宽度，代码如下所示。当所有样式类名为content的div元素的flex属性值都被设置为1时，这些div元素的宽度均等。
         .content {            border: 2px solid #ff2834;            padding: 1em;            display: -moz-box;            display: -webkit-box;            display: box;            -webkit-box-flex: 1;            -moz-box-flex: 1;            box-flex: 1;            -moz-box-orient:vertical;            -webkit-box-orient:vertical;            -o-box-orient:vertical;            box-orient:vertical;        }
　   在浏览器中打开示例页面，所有样式类名为content的div元素的宽度自动增长，这些元素的总宽度等于容器元素，即id属性值为main的div元素的宽度,每一个样式类名为content的div元素的宽度均等，如下图所示。
       接下来，我们设置第二个样式类名为content的div元素的box-flex属性值为2，代码如下所示。
        .content:nth-child(2) {            -webkit-box-flex: 2;            -moz-box-flex: 2;            box-flex: 2;        }
       在浏览器中打开示例页面，所有样式类名为content的div元素的宽度自动增长，第二个类名为content的div元素 的宽度时其他两个div的2倍，如下图所示。
      为了更清晰地计算元素宽度，我们取消所有元素的边框设置及内边距设置，修改后的完整样式代码如下所示。
        #main {            display: -moz-box;            display: -webkit-box;            display: box;        }        .content {            display: -moz-box;            display: -webkit-box;            display: box;            -webkit-box-flex: 1;            -moz-box-flex: 1;            box-flex: 1;            -moz-box-orient:vertical;            -webkit-box-orient:vertical;            -o-box-orient:vertical;            box-orient:vertical;        }        .content:nth-child(2) {            -webkit-box-flex: 2;            -moz-box-flex: 2;            box-flex: 2;        }
      在浏览器中打开示例页面，第二个样式类名为content的div元素宽度为其他样式类名为content的div元素宽度的两倍，假设这些元素的容器元素，即id属性值为main的div元素的宽度等于600px，则第一个与第三个样式类名为content的div元素宽度的宽度均等于150px，第二个样式类名为content的div元素宽度的宽度等于300px。
5、设置垂直方向上的对齐方式 box-align
      box-align决定了垂直方向上的空间利用，也就是垂直方向上的对齐表现。为了便于记忆，我们可以拿来和CSS2中的vertical-align隐射记忆，两者都有”align”，都是都是垂直方向的对齐。
     box-align的可选参数有：
start | end | center | baseline | stretch
     其中stretch为默认值，为拉伸，也就是父标签高度过高，其孩子元素的高度就多高，start表示顶边对齐，end为底部对齐，center为居中对齐，baseline表示基线（英文字母o,m,n等的底边位置线）对齐。
6、设置垂直方向上的对齐方式box-pack
      box-pack决定了父标签水平遗留空间的使用，其可选值有：
start | end | center | justify
      就大部分的行为表现来说分别对应text-align属性的值：left | right | center | justify；但是，之所以box-pack不使用”left”, 而是”start”，是因为box-direction属性，这玩意可以反转原本的排列，原本的“左对齐”反转后结果是“右对齐”了，此时”left”显然就词不达意了，所以使用”start”更具有概括性，就是与父标签的起始位置对齐，从而不会产生语义与行为上的困扰。
7、box-flex-group和box-ordinal-group
      子元素除了以上说的几个属性外，还有两个属性box-flex-group和box-ordinal-group，因为这两个属性实用性不强，这里就不做详细的说明。目前没有浏览器支持 box-flex-group 属性。
     box-ordinal-group用整数值来定义伸缩盒对象的子元素显示顺序。数值越小，位置就越靠前，这不难理解，第一组在最前嘛，随后第二组，第三组… 例如：box-ordinal-group:1的组就会在box-ordinal-group:2的组前面显示。于是，我们可以利用这个属性改变子元素的顺序。