一、概念
彈性盒模型是css3的一種新的布局方式，是一種當前頁面需要適應(yīng)不同的屏幕大小及設(shè)備類型時確保擁有恰當?shù)男袨榈牟季址绞健?/p>
二、目的
引入盒模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列，對齊和分配空白空間。
三、內(nèi)容
彈性盒子由彈性容器和彈性子元素組成
彈性容器通過設(shè)置display屬性的值為flex或inline-flex將其定義為彈性容器
彈性容器內(nèi)包含了一個或多個子元素
注意：
彈性容器外及彈性子元素內(nèi)是正常渲染的，彈性盒子只定義了彈性子元素如何在彈性容器內(nèi)布局
彈性子元素通常在彈性盒子內(nèi)一行顯示，默認每個容器只有一行
四、彈性父元素屬性
4.1flex-direction
flex-direction順序指定了彈性子元素在父容器中的位置
4.1.1 flex-direction: row
橫向從左到右排列（左對齊），默認的排列方式。
舉個栗子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
ul li{
list-style: none;
}
ul{
width: 500px;
height: 300px;
margin: 50px auto;
border: 2px solid black;
/* 在父容器中指定為flex布局* 將來要寫瀏覽器兼容* /*/
display:flex;
flex-direction: row;
}
li{
width: 80px;
height: 50px;
border: 2px solid black;
background-color: red;
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
效果
注：因為以下只是改變栗子中的 flex-direction的屬性值，栗子都是都是一樣的，所以偷個懶，只給最后效果圖 。
4.1.2 flex-direction: row-reverse
反向橫向排列（右對齊，從后往前排，最后一排在對前面。）
效果
4.1.3flex-direction: column
縱向排列
效果
4.1.4flex-direction: column-reverse
反向縱向排列，從往前排，最后一項排在最上面
效果
4.2justify-content
內(nèi)容對齊。內(nèi)容隨其屬性應(yīng)用在彈性容器上，把彈性項沿著彈性容器的主線軸對其。
4.2.1 justify-content: flex-start
彈性項目向行頭緊挨著填充。這個是默認值，第一個彈性項的main-start外邊距邊線被防止在該行的main-start邊線，而后彈性項一次平齊排放
舉個栗子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
ul li{
list-style: none;
}
ul{
width: 500px;
height: 300px;
margin: 50px auto;
border: 2px solid black;
/* 在父容器中指定為flex布局* 將來要寫瀏覽器兼容* /*/
display:flex;
justify-content: flex-start
}
li{
width: 80px;
height: 50px;
border: 2px solid black;
background-color: red;
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
效果
注：因為以下只是改變栗子中的 justify-content: flex-start的屬性值，栗子都是都是一樣的，所以偷個懶，只給最后效果圖 。
4.2.2justify-content: flex-end
彈性項目向行尾緊挨著填充。第一個彈性項的main-end外邊距邊線被防止在該行的main-end邊線，而后續(xù)彈性項依次平齊擺放
效果
4.2.3justify-content: center
彈性項目居中緊挨著填充，如果剩余的自由空間是負的，則彈性項目將在兩個方向同時溢出
效果
4.2.4justify-content: space-between
彈性項目平均分布在該行上。
如果剩余空間為負或者只有一個彈性項，則該值等同于flex-start。否則第一個彈性項的外邊距和行的main-start邊線對齊，而最后一個彈性項的外邊距和行的main-end邊線對齊，然后剩余的彈性項分布在該行上，相鄰項目的間隔相等。
效果
4.2.5justify-content: space-around
如果剩余空間為負或者只有一個彈性項，則該值等同于center，否則，彈性項目沿該行分布，且必須間隔相等（比如是20px），同時收尾兩邊和彈性容器之間留有一半的間隔（1/2*20px = 10 px）
效果
4.3align-items
設(shè)置或檢測彈性盒子元素在軸側(cè)（縱軸）方向上的對齊方式
4.3.1align-items: flex-start
彈性盒子元素的軸側(cè)（縱軸）起始位置的邊界緊靠住該行的軸側(cè)起始邊界
舉個栗子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
ul li{
list-style: none;
}
ul{
width: 500px;
height: 300px;
margin: 50px auto;
border: 2px solid black;
/* 在父容器中指定為flex布局* 將來要寫瀏覽器兼容* /*/
display:flex;
align-items: flex-start；
}
li{
width: 80px;
height: 50px;
border: 2px solid black;
background-color: red;
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
效果
注：因為以下只是改變栗子中的 align-items: flex-start的屬性值，栗子都是都是一樣的，所以偷個懶，只給最后效果圖 。
4.3.2align-items: flex-end
彈性盒子元素的軸側(cè)（縱軸）起始位置 緊靠住該行的軸側(cè)結(jié)束邊界
效果
4.3.3align-items:center
彈性盒子元素在該行的軸側(cè)（縱軸）上居中放置。
如果該行的尺寸小于彈性子元素的尺寸，則會向兩個方向溢出相同的長度
效果
4.3.4align-items:baseline
如果彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與flex-start等效，其他情況下，該值將參與基線對齊。
效果
4.3.5 align-items: stretch
如果指定側(cè)軸大小的屬性為auto，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制
效果（此時沒有給li設(shè)置高度）
4.4 flex-wrap
用于指定彈性盒子的子元素的元素換行方式
4.4.1 flex-wrap：nowrap
默認，彈性容器為單行，該情況下彈性子項可能會溢出容器或改變自身大小
舉個栗子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
ul li{
list-style: none;
}
ul{
width: 500px;
height: 300px;
margin: 50px auto;
border: 2px solid black;
/* 在父容器中指定為flex布局* 將來要寫瀏覽器兼容* /*/
display:flex;
flex-wrap：nowrap;
}
li{
width: 80px;
height: 50px;
border: 2px solid black;
background-color: red;
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
效果
注：因為以下只是改變栗子中的 flex-wrap：nowrap的屬性值，栗子都是都是一樣的，所以偷個懶，只給最后效果圖 。
4.4.2 flex-wrap：wrap
彈性容器為多行，該情況下子項溢出的比分會被放置的新行，子項內(nèi)部會發(fā)生斷行
效果
4.4.3 flex-wrap：wrap-reverse
反轉(zhuǎn)wrap排列
效果
五、彈性子元素屬性
5.1 order
order屬性設(shè)置彈性容器內(nèi)彈性子元素的屬性
order: integer(最大值)
用整數(shù)值來定義排列順序，數(shù)值小的排在最前面?？梢詾樨撝?/p>
舉個栗子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01_order</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: noen;
}
ul{
width:500px;
height: 300px;
border: 2px solid black;
/*在父容器中指定為flex布局*/
/*將來如果要寫的話 需要些瀏覽器內(nèi)核兼容*/
display: flex;
margin-left: auto;
margin-right: auto;
}
li{
list-style: none;
width: 80px;
height: 50px;
border: 2px solid black;
color: white;
background: orangered;
font-size: 30px;
}
ul li:nth-of-type(2){
/*order: integer(最大值);
* 排序：數(shù)值越小，越排前，默認為0*/
order:-4 ;
}
ul li:nth-of-type(5){
order: -5;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
效果
5.2 align-self單獨對齊方式
align-self: auto;
如果'align-self'的值為'auto'，則其計算值為元素的父元素的'align-items'值，如果其沒有父元素，則計算值為'stretch'。
align-self: flex-start;
彈性盒子子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的軸側(cè)起始邊界
align-self：flex-end
彈性盒子元素的側(cè)軸（縱軸）其實位置的邊界緊靠著該行的軸側(cè)結(jié)束邊界
align-self: center
彈性盒子元素在該行的軸側(cè)上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）
align-self: baseline;
如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與flex-start等效，其他情況下，該值將參與基線對齊
align-self: stretch
如果指定側(cè)軸大小的屬性值為auto，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照min/max-width/height屬性的限制
舉個栗子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>05_align-self</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
ul{
width:500px;
height: 300px;
border: 2px solid black;
/*在父容器中指定為flex布局*/
/*將來如果要寫的話 需要些瀏覽器內(nèi)核兼容*/
display: flex;
margin-left: auto;
margin-right: auto;
}
li{
list-style: none;
width: 80px;
/*height: 50px;*/
border: 2px solid black;
color: white;
background: skyblue;
font-size: 30px;
}
ul li:nth-of-type(1){
/*單獨對齊方式： 自動（默認）*/
align-self: auto;
}
ul li:nth-of-type(2){
/*頂部對齊*/
align-self: flex-start;
}
ul li:nth-of-type(3){
/*底部對齊*/
align-self: flex-end;
}
ul li:nth-of-type(4){
/*居中對齊*/
align-self: center;
}
ul li:nth-of-type(5){
/*文本基線對齊*/
align-self: baseline;
}
ul li:nth-of-type(6){
/* flex-flow: wrap;*/
/*上下對齊并鋪滿*/
align-self: stretch;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
效果
5.3 flex
flex屬性用于指定彈性子元素如何分配空間
flex-basis
定義彈性盒子元素的默認基準值
舉個栗子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>04_flex-basis</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
ul{
width:800px;
height: 300px;
border: 2px solid black;
/*在父容器中指定為flex布局*/
/*將來如果要寫的話 需要些瀏覽器內(nèi)核兼容*/
display: flex;
margin: 50px auto;
}
li{
list-style: none;
width: 80px;
height: 50px;
border: 2px solid black;
color: white;
background: orangered;
font-size: 30px;
}
ul li:nth-of-type(1){
/*flex-basis: <length> | auto;*/ /* default auto */
/*固定大?。耗J為0，可以設(shè)置px值，也可以設(shè)置百分比大小*/
flex-basis:300px;
}
ul li:nth-of-type(3){
flex-basis: 20%;
}
ul li:nth-of-type(5){
/*默認值是auto*/
flex-basis: auto;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
效果
flex-grow
定義彈性盒子元素的擴展比率
舉個栗子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02_flex-grow</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: noen;
}
ul{
width:800px;
height: 300px;
border: 2px solid black;
/*在父容器中指定為flex布局*/
/*將來如果要寫的話 需要些瀏覽器內(nèi)核兼容*/
display: flex;
margin-left: auto;
margin-right: auto;
}
li{
list-style: none;
width: 80px;
height: 50px;
border: 2px solid black;
color: white;
background: orangered;
font-size: 30px;
}
ul li:nth-of-type(1){
/*放大：默認0（即如果有剩余空間也不放大，值為1則放大，2是1的雙倍大小，以此類推）不一定是雙倍*/
flex-grow: 1;
}
ul li:nth-of-type(3){
flex-grow:3 ;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
效果
flex-shrink
定義彈性盒子元素的收縮比率
舉個栗子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03_flex-shrink</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
ul{
width:500px;
height: 300px;
border: 2px solid black;
/*在父容器中指定為flex布局*/
/*將來如果要寫的話 需要些瀏覽器內(nèi)核兼容*/
display: flex;
margin-left: auto;
margin-right: auto;
}
li{
list-style: none;
width: 80px;
height: 50px;
border: 2px solid black;
color: white;
background: orangered;
/*font-size: 30px;*/
}
ul li:nth-of-type(1){
/*縮?。喝绻许椖康膄lex-shrink屬性都為1，當空間不足時，都將等比例縮小。
* 果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。
負值對該屬性無效。）*/
flex-shrink: 2;
}
ul li:nth-of-type(3){
flex-shrink:3 ;
}
ul li:nth-of-type(5){
flex-shrink: 5;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
效果
推薦的完美的居中
即父級設(shè)置display：flex，子級設(shè)置margin-auto，即可實現(xiàn)完美居中
舉個栗子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: auto;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Perfect centering!</div>
</div>
</body>
</html>
效果
好累，伸懶腰，肩膀要廢了。
喜歡就點贊~
