弹性盒布局（Flexible Box）可以轻松地创建响应式网页布局，为盒状（块）模型增加灵活性。弹性盒
改进了块模型，既不使用浮动，也不会在弹性盒容器与其内容之间合并外边距，是一种非常灵活的布局方法，就像在一个大盒子里摆放的几个小盒子，相对独立，容易设置。首先，看一下弹性盒的结构，如图10-11所示。
flex布局对齐方式
图10-11  弹性盒结构
从图10-11可以看出，弹性盒由容器、子元素和轴构成，并且默认情况下，子元素的排布方向与横轴的方向是一致的。弹性盒模型可以用简单的方
式满足很多常见的复杂的布局需求。它的优势在于开发人员只是生明布局应该具有的行为，
而不需要给出具体的实现方式。浏览器会负责完成实际的布局。该布局模型几乎在主流浏览器中都得到了支持，如表10-1所示。
表10-1 浏览器支持情况
IOS Safari
Android Browser
IE
Opera
Chrome
Firefox
7.0+
4.4+
11+
12.1+
21+
22+
下面通过一个案例来演示弹性盒控制布局的各个属性的应用，如demo10-3.html所示。
demo10-3.html
01  <!DOCTYPE html>
02  <html lang="en">
03  <head>
04    <meta charset="utf-8" />
05    <title>弹性盒子属性</title>
06  </head>
07  <style type="text/css">
08    .box{
09      min-height: 160px;
10      display: flex;    /*指定弹性盒的容器*/
11      /*
12      flex - direction:row|row-reverse|column|column-reverse;
13      flex - wrap: nowrap|wrap|wrap-reverse;
14      */
15      flex-flow: row;  /*弹性盒子元素按横轴方向顺序排列*/
16      justify-content: center; /*设置弹性盒子元素向行中间位置对齐*/
17      align-items: center; /*弹性盒子元素向垂直于轴的方向上的中间位置对齐*/
18      background-color: gray;
19    }
20    .A,.B,.C {
21        background-color: white;
22        border: 1px solid gray;
23    }
24    .box div.A{
25        order: 1;  /*order设置该子元素出现的顺序*/
26        flex-grow: 0;  /*扩展比率*/
27        flex-shrink: 1;  /*收缩比率*/
28        flex-basis: auto;  /*宽度，像素值*/
29    }
30    .box div.B{
31        order: 2;
32        flex: 0 1 auto;  /*扩展比率0，收缩比率1和宽度居中的缩写形式*/
33    }
34    .box div.C{
35        order: 3;
36        flex: 0 1 auto;
37    }
38  </style>
39  <body>
40    <div class="box">
41        <div class="A">A</div>
42        <div class="B">B</div>
43        <div class="C">C</div>
44    </div>
45  </body>
46  </html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。