flexible伸缩盒模型
前言
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>
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>
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>
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>
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>
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>
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>
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>
使用于伸缩项目的其他属性：
flex-basis、flex、align-self
