flexible伸缩盒模型

基本术语

　　下面是一张伸缩盒模型的概念图：

　　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