前言
flexible box即为可伸缩的盒模型，让容器能让其子元素自由改变宽高或顺序，以最佳的方式填充容器。可以让子元素扩展来填满可用空间，缩小来防止溢出。flexible box由伸缩容器和伸缩项目组成。
兼容性：IE10+、firefox、chrome、safari
基本术语
下面是一张伸缩盒模型的概念图：
1、flex container：伸缩容器
2、flex item：伸缩项目
3、main-axis：主轴
4、main-start：主轴起点
5、main-end：主轴终点
6、main-size：主轴尺寸
7、cross-axis：侧轴
8、cross-start：侧轴起点
9、cross-end：侧轴终点
10、cross-size：侧轴尺寸
相关属性介绍
1、display:flex | inline-flex：定义伸缩容器
取值：
1、flex：将元素定义为弹性盒模型
2、inline-flex：将元素定义为内联块级弹性盒模型
2、flex-direction：适用于伸缩容器，定义伸缩项目排列在伸缩容器上的方向
取值：
1、row：默认值，当文字排版时ltr时从左向右，当文字排版时rtl时从右向左
2、row-reverse：方向与row相反
3、column：从上向下
4、column-reverse：从下往上
1 <!DOCTYPE html>
2 <html>
3 <head lang="zh-cn">
4 <meta charset="UTF-8">
5 <title>flexible</title>
6 <style>
7 .wrap {
8 display: -webkit-flex;
9 /*-webkit-flex-direction: row;*/
10 /*-webkit-flex-direction: row-reverse;*/
11 /*-webkit-flex-direction: column;*/
12 -webkit-flex-direction: column-reverse;
13
14 background: pink;
15 width: 600px;
16 margin: 50px auto;
17 }
18
19 .item {
20 height: 100px;
21 width: 98px;
22 border: 1px solid #000;
23 }
24 </style>
25 </head>
26 <body>
27 <div class="wrap">
28 <div class="item">1</div>
29 <div class="item">2</div>
30 <div class="item">3</div>
31 <div class="item">4</div>
32 <div class="item">5</div>
33 </div>
34 </body>
35 </html>View Code
3、flex-wrap：适用于伸缩容器，定义伸缩容器是单行还是多行。
取值：
1、nowrap：默认，单行
2、wrap：多行，新增相沿着侧轴方向添加
3、wrap-reverse：多行，侧轴起点与终点方向交换
1 <!DOCTYPE html>
2 <html>
3 <head lang="zh-cn">
4 <meta charset="UTF-8">
5 <title>flexible</title>
6 <style>
7 .wrap {
8 display: -webkit-flex;
9 -webkit-flex-direction: row;
10 /*-webkit-flex-wrap: nowrap;*/
11 /*-webkit-flex-wrap: wrap;*/
12 -webkit-flex-wrap: wrap-reverse;
13
14 background: pink;
15 width: 400px;
16 margin: 50px auto;
17 }
18
19 .item {
20 height: 100px;
21 width: 98px;
22 border: 1px solid #000;
23 }
24 </style>
25 </head>
26 <body>
27 <div class="wrap">
28 <div class="item">1</div>
29 <div class="item">2</div>
30 <div class="item">3</div>
31 <div class="item">4</div>
32 <div class="item">5</div>
33 <div class="item">6</div>
34 <div class="item">7</div>
35 <div class="item">8</div>
36 <div class="item">9</div>
37 </div>
38 </body>
39 </html>View Code
4、justif-content：适用于伸缩容器，定义伸缩项目沿着主轴的对齐方式
取值：
1、flex-start：默认值，伸缩项目向一行的起始位置靠齐
2、flex-end：伸缩项目向一行的结束位置靠齐
3、center：伸缩项目向一行的中间靠齐
4、space-between：第一个在开始位置，第二个在结束位置，中间的平均分配
5、space-around：两端一半空位，中间平均分配
1 <!DOCTYPE html>
2 <html>
3 <head lang="zh-cn">
4 <meta charset="UTF-8">
5 <title>flexible</title>
6 <style>
7 .wrap {
8 display: -webkit-flex;
9 -webkit-flex-direction: row;
10 -webkit-flex-wrap: nowrap;
11 /*-webkit-justify-content: flex-start;*/
12 /*-webkit-justify-content: flex-end;*/
13 /*-webkit-justify-content: center;*/
14 /*-webkit-justify-content: space-between;*/
15 -webkit-justify-content: space-around;
16
17 background: pink;
18 width: 500px;
19 margin: 50px auto;
20 }
21
22 .item {
23 height: 100px;
24 width: 98px;
25 border: 1px solid #000;
26 }
27 </style>
28 </head>
29 <body>
30 <div class="wrap">
31 <div class="item">1</div>
32 <div class="item">2</div>
33 <div class="item">3</div>
34 <div class="item">4</div>
35 </div>
36 </body>
37 </html>View Code
5、align-items：适用于伸缩项目，定义在侧轴上的对齐方式
取值：
1、flex-start：侧轴方向向起始位置靠齐
2、flex-end：侧轴方向向结束位置靠齐
3、center：侧轴方向居中靠齐
4、baseline：侧轴方向基线对齐
5、stretch：默认值，侧轴方向拉伸填充伸缩容器
1 <!DOCTYPE html>
2 <html>
3 <head lang="zh-cn">
4 <meta charset="UTF-8">
5 <title>flexible</title>
6 <style>
7 .wrap {
8 display: -webkit-flex;
9 -webkit-flex-direction: row;
10 -webkit-flex-wrap: wrap;
11 -webkit-align-items: flex-start;
12 -webkit-align-items: flex-end;
13 -webkit-align-items: center;
14 -webkit-align-items: stretch;
15 -webkit-align-items: baseline;
16
17 background: pink;
18 width: 400px;
19 height: 400px;
20 margin: 50px auto;
21 }
22
23 .item {
24 width: 98px;
25 border: 1px solid #000;
26 }
27 </style>
28 </head>
29 <body>
30 <div class="wrap">
31 <div class="item">1<br />1</div>
32 <div class="item">2</div>
33 <div class="item">3</div>
34 <div class="item">4</div>
35 <div class="item">5</div>
36 <div class="item">6</div>
37 <div class="item">7</div>
38 <div class="item">8</div>
39 <div class="item">9</div>
40 </div>
41 </body>
42 </html>View Code
6、align-content：适用于伸缩容器，指定多行伸缩容器的对齐
取值：
1、flex-start：各行向伸缩容器的起点位置堆叠。
2、flex-end：各行向伸缩容器的结束位置堆叠。
3、center：各行向伸缩容器的中间位置堆叠。
4、space-between：首行靠开始，末行靠结尾， 中间平均分配间隔
5、space-around：首末一半，中间平均分配间隔
6、stretch：默认值，各行伸缩占满剩余空间
1 <!DOCTYPE html>
2 <html>
3 <head lang="zh-cn">
4 <meta charset="UTF-8">
5 <title>flexible</title>
6 <style>
7 .wrap {
8 display: -webkit-flex;
9 -webkit-flex-direction: row;
10 -webkit-flex-wrap: wrap;
11 -webkit-align-content: flex-start;
12 -webkit-align-content: flex-end;
13 -webkit-align-content: center;
14 -webkit-align-content: space-between;
15 -webkit-align-content: space-around;
16 -webkit-align-content: stretch;
17
18 background: pink;
19 width: 400px;
20 height: 400px;
21 margin: 50px auto;
22 }
23
24 .item {
25 width: 98px;
26 border: 1px solid #000;
27 }
28 </style>
29 </head>
30 <body>
31 <div class="wrap">
32 <div class="item">1<br />1</div>
33 <div class="item">2</div>
34 <div class="item">3</div>
35 <div class="item">4</div>
36 <div class="item">5</div>
37 <div class="item">6</div>
38 <div class="item">7</div>
39 <div class="item">8</div>
40 <div class="item">9</div>
41 </div>
42 </body>
43 </html>View Code
7、order：适用于伸缩项目，控制伸缩项目在伸缩容器中出现的顺序。
取值：默认0，正整数和0。
1 <!DOCTYPE html>
2 <html>
3 <head lang="zh-cn">
4 <meta charset="UTF-8">
5 <title>flexible</title>
6 <style>
7 .wrap {
8 display: -webkit-flex;
9 -webkit-flex-direction: row;
10 background: pink;
11 width: 400px;
12 height: 400px;
13 margin: 50px auto;
14 }
15
16 .item {
17 width: 98px;
18 border: 1px solid #000;
19 }
20 </style>
21 </head>
22 <body>
23 <div class="wrap">
24 <div class="item" style="-webkit-order: 3">1<br />1</div>
25 <div class="item" style="-webkit-order: 4">2</div>
26 <div class="item" style="-webkit-order: 1">3</div>
27 <div class="item" style="-webkit-order: 0">4</div>
28 <div class="item">5</div>
29 <div class="item">6</div>
30 <div class="item">7</div>
31 <div class="item">8</div>
32 <div class="item">9</div>
33 </div>
34 </body>
35 </html>View Code
8、flex-grow：适用于伸缩项目，定义伸缩项目的扩展能力，对剩余空间所占的比例分配。
取值：默认0，正整数和0
1 <!DOCTYPE html>
2 <html>
3 <head lang="zh-cn">
4 <meta charset="UTF-8">
5 <title>flexible</title>
6 <style>
7 .wrap {
8 display: -webkit-flex;
9 -webkit-flex-direction: row;
10 background: pink;
11 width: 400px;
12 height: 400px;
13 margin: 50px auto;
14 }
15
16 .item {
17 width: 50px;
18 border: 1px solid #000;
19 }
20 </style>
21 </head>
22 <body>
23 <div class="wrap">
24 <div class="item" style="-webkit-flex-grow: 1">1<br />1</div>
25 <div class="item" style="-webkit-flex-grow: 2">2</div>
26 <div class="item">3</div>
27 </div>
28 </body>
29 </html>View Code
9、flex-shrink：适用于伸缩项目，定义伸缩项目收缩的能力，伸缩项目超出伸缩容器后收缩的比例。
取值：默认0，正整数和0
1 <!DOCTYPE html>
2 <html>
3 <head lang="zh-cn">
4 <meta charset="UTF-8">
5 <title>flexible</title>
6 <style>
7 .wrap {
8 display: -webkit-flex;
9 -webkit-flex-direction: row;
10 background: pink;
11 width: 400px;
12 height: 400px;
13 margin: 50px auto;
14 }
15
16 .item {
17 width: 300px;
18 border: 1px solid #000;
19 }
20 </style>
21 </head>
22 <body>
23 <div class="wrap">
24 <div class="item" style="-webkit-flex-shrink: 1">1<br />1</div>
25 <div class="item" style="-webkit-flex-shrink: 2">2</div>
26 <div class="item">3</div>
27 </div>
28 </body>
29 </html>View Code
使用于伸缩项目的其他属性：
flex-basis、flex、align-self
