彈性布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
彈性布局：以下建議使用開發者工具修改值進行查看非常直觀易懂。
彈性布局屬性使用順序：
一，父元素屬性設置順序：
以下四個屬性是對主軸方向上的子元素進行調整：
1，設置彈性盒子 display:flex;
2，確定主軸及其排列方向，這個值已經確定了排列方向，下面所有子元素都一樣，
如果是從左到右，那么下面也都是確定從左到右排列，不能改變。
flex-direction:
row; 默認值，從左到右排列
row-reverse; 從右到左排列
column; 從上到下排列
column-reverse; 從下到上排列
3，設置是否換行(flex-direction已經確定排列方向，不能改變，謹記別出錯了。)
flex-wrap:
nowrap; 默認值，不進行換行，可能溢出。
wrap; 換行，第一行排不下，第二行排列。。。(從左到右)
wrap-reverse; 跟wrap相反，最后一行從左到右排列，倒數第二行從左到右排列。。。
4，設置主軸方向上子元素的排列位置
justify-content:
flex-start; 所有子元素在主軸開始位置堆疊
flex-end; 所有子元素在主軸結束位置堆疊
center; 所有子元素在主軸中間堆疊
space-around; 所有子元素在主軸方向上的兩邊邊距相等(ml=mr或者mt=mb)
space-between; 主軸兩端子元素靠邊，另外所有子元素之間的間距相等
space-evenly; 所有子元素之間的邊距，及其兩端子元素到到邊的邊距相等。
以下兩個屬性是對側軸方向的子元素進行調整：
5，設置側軸方向上子元素的排列位置
align-content:
stretch; 默認。各行將會伸展以占用剩余的空間。
flex-start; 所有子元素在側軸開始位置堆疊
flex-end; 所有子元素在側軸結束位置堆疊
center; 所有子元素在側軸中間堆疊
space-around; 所有子元素在側軸方向上的兩邊邊距相等(ml=mr或者mt=mb)
space-between; 側軸兩端子元素靠邊，另外所有子元素之間的間距相等
space-evenly; 所有子元素之間的邊距，及其兩端子元素到到邊的邊距相等。
6，設置好以上5個屬性基本可以排列好子元素位置：
align-items:
各個值解析:
flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
stretch：如果指定側軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。
align-items 設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。
align-content 屬性用於修改 flex-wrap 屬性的行為。類似於 align-items, 但它不是設置彈性子元素的對齊，而是設置各個行的對齊。
二，實例
1，flex-direction的值有:
row：橫向從左到右排列（左對齊），默認的排列方式。
row-reverse：反轉橫向排列（右對齊，從后往前排，最后一項排在最前面。
column：縱向排列。
column-reverse：反轉縱向排列，從后往前排，最后一項排在最上面。
2，舉例：其中固定一個值 flex-direction:column-reverse; 即：豎直從上往下排列為：4321
其中 justify-content的值分別等於：
flex-start 時 子元素 1 靠父元素的底邊
flex-end 時 子元素 4 靠父元素的上邊
cneter 時 所有子元素上下居中排列
space-around 時 每個子元素的margin-top/margin-bottom都相等
space-between 時 元素1靠父元素底邊，元素4靠父元素上邊，每兩個元素之前的邊距相等
space-evenly 時 元素1與父元素底邊，元素4與父元素上邊，以及元素與元素之前的邊距相等。
即所有邊距相等。
3，align-items 設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。即：與主軸垂直的方向。
固定其中兩個值：
flex-direction:column-reverse; 主軸排列方式為垂直反向排列，即從上往下：4321
justify-content:space-evenly; 所有的外邊距都相等。
主軸垂直反向排列，所以元素排列為一豎，所以align-items就是確定該豎的位置
當align-items值分別等於：
flex-start 時 該豎靠父元素左邊
flex-end 時 該豎靠父元素右邊
center 時 該豎左右居中
baseline 時 該豎靠父元素左邊(等價於flex-start)
stretch 時 該豎靠父元素左邊(如果width沒有定義，那么會把元素拉伸到最大寬度)
這里可以注釋掉如下樣式中的 .container > span 中的width，
並且使用開發者工具進行查看就可清楚。
三，CSS3 彈性盒子屬性
下表列出了在彈性盒子中常用到的屬性:
display 指定 HTML 元素盒子類型。
flex-direction 指定了彈性容器中子元素的排列方式
justify-content 設置彈性盒子元素在主軸（橫軸）方向上的對齊方式。
align-items 設置彈性盒子元素在側軸（縱軸）方向上的對齊方式。
flex-wrap 設置彈性盒子的子元素超出父容器時是否換行。
align-content 修改 flex-wrap 屬性的行為，類似 align-items, 但不是設置子元素對齊，而是設置行對齊
flex-flow flex-direction 和 flex-wrap 的簡寫
order 設置彈性盒子的子元素排列順序。
align-self 在彈性子元素上使用。覆蓋容器的 align-items 屬性。
flex 設置彈性盒子的子元素如何分配空間。
</title>
</head>
<style>
.container{
width: 500px;
height: 500px;
background: lightgrey;
display: flex;
flex-wrap: wrap;
flex-direction:column-reverse;
justify-content:flex-start;
align-content: flex-start;
align-items:stretch;
}
.container > span{
background: #0f0;
display: inline-block;
width: 100px;
height: 100px;
}
</style>
<body>
<div class="container">
<span class="one1" style="background: blue">001</span>
<span class="one2" style="background: green">002</span>
<span class="one3" style="background: yellow">003</span>
<span class="one4" style="background: orange">004</span>
<span class="one5" style="background: #0f0">004</span>
<span class="one6" style="background: #f3f">004</span>
<span class="one7" style="background: #553">004</span>
<span class="one8" style="background: #2f8">004</span>
</div>
</body>
</html>
order排序語法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
排序語法
1，order默認值都是0，可以是負數，值越小排列越靠前，值越大排列越靠后面。
2，子元素： ABCD
所有子元素都不設置order值，默認值為0。
如果設置B的 order > 0 則排列在最后面
如果設置B的 order = 0 則所有排列不變
如果設置B的 order < 0 則B排列在最前面
</title>
</head>
<style>
.container{
width: 530px;
height: 530px;
background: #eee;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-content: flex-start;
align-items: center;
}
.flex-item{
width: 100px;
height: 100px;
}
.one1{
/*order:1;*/
}
.one2{
order:-1;
}
.one3{
/*order:1;*/
}
.one4{
/*order:1;*/
}
.one5{
/*order:1;*/
}
.one6{
/*order:1;*/
}
.one7{
order:-5;
}
</style>
<body>
<div class="container">
<span class="flex-item one1" style="background: #f00">flex-item 1</span>
<span class="flex-item one2" style="background: #0f0">flex-item 2</span>
<span class="flex-item one3" style="background: #00f">flex-item 3</span>
<span class="flex-item one4" style="background: #0ff">flex-item 4</span>
<span class="flex-item one5" style="background: #f0f">flex-item 5</span>
<span class="flex-item one6" style="background: #e9f">flex-item 6</span>
<span class="flex-item one7" style="background: #77e">flex-item 7</span>
</div>
</body>
</html>
在彈性盒子里面設置margin的值為“auto”，進行各種居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
對齊：
1，在彈性盒子里面只要使用:
margin:auto;
margin-top:auto;
margin-right:auto;
margin-bottom:auto;
margin-left:auto;
設置"margin"值為"auto"值，自動獲取彈性容器中剩余的空間。
所以設置垂直方向margin值為"auto"，可以使彈性子元素在彈性容器的兩上軸方向都完全居中。
同理，設置水平方向上的margin-left/right值為“auto”,可以使子元素在彈性容器的水平方向左右居中。
此外，如果同一行有ABC三個子元素，設置B子元素margin-right:auto;
那么AB靠左邊堆疊，C直接靠右頂邊。
如果給B設置margin-left:auto;margin-right;
那么彈性盒子的寬度減去三個子元素的寬度，B就會相對剩余空間左右居中。即左右邊距相等。
</title>
</head>
<style>
.container{
width: 530px;
height: 330px;
background: #0ff;
margin-top: 30px;
display: flex;
/*flex-direction: row;*/
/*flex-wrap: wrap;*/
/*justify-content: flex-start;*/
/*align-content: flex-start;*/
}
.flex-item{
display: inline-block;
height: 100px;
width: 100px;
}
.one{
margin-right: auto;
margin-left: auto;
}
.two{
margin-right: auto;
}
.three{
margin-left: auto;
}
.four{
margin: auto;
}
</style>
<body>
<h3>
在彈性盒子里面只要使用
設置"margin"值為"auto"值，自動獲取彈性容器中剩余的空間。
所以設置垂直方向margin值為"auto"，可以使彈性子元素在彈性容器的兩上軸方向都完全居中。
同理，設置水平方向上的margin-left/right值為“auto”,可以使子元素在彈性容器的水平方向左右居中。
</h3>
<h4>設置第二個子元素margin-left/margin-right:auto;就會平均分配在彈性盒子中剩下的空間給左右邊距。</h4>
<div class="container">
<span class="flex-item" style="background: #f00">flex-item 1</span>
<span class="flex-item one" style="background: #ff0">左右外邊距相等</span>
<span class="flex-item" style="background: #0f0">flex-item 3</span>
</div>
<div class="container">
<span class="flex-item two" style="background: #f00">flex-item 1</span>
<span class="flex-item" style="background: #ff0">flex-item 2</span>
<span class="flex-item" style="background: #0f0">flex-item 3</span>
</div>
<div class="container">
<span class="flex-item" style="background: #f00">flex-item 1</span>
<span class="flex-item" style="background: #ff0">flex-item 2</span>
<span class="flex-item three" style="background: #0f0">flex-item 3</span>
</div>
<div class="container">
<span class="flex-item four" style="background: #0f0">上下左右絕對居中</span>
</div>
</body>
</html>
align-self 屬性是相對於側軸對子元素本身沿着側軸方向上進行位置設定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
1，align-self 屬性用於設置彈性子元素自身在側軸（縱軸）方向上的對齊方式。
總而言之：最好可以使用開發者工具進行設置。
2，align-content 設置側軸方向上的行/列的位置，
align-slef 是設置側軸方向上的行內/列內的子元素的位置
所以，如果設置了align-content，再設置align-self 是無效的。
具體，具體請使用開發者工具進行調試，簡單易懂。
</title>
</head>
<style>
.flex-container{
padding: 30px;
width: 600px;
height: 500px;
background: #624F5E;
margin: auto;
display: flex;
flex-wrap: wrap;
flex-direction: column;
margin-top: 50px;
}
.flex-item{
height:123px;
}
.flex-1{
background: #f00;
align-self: flex-start;
margin-right: auto;
margin-left: auto;
}
.flex-2{
background: #ff0;
}
.flex-3{
background: #f0f;
align-self: flex-end;
}
.flex-4{
background: #0f3;
}
.flex-5{
background: #dd3;
}
.flex-6{
background: #233;
align-self: flex-end;
}
.flex-7{
background: #a3e;
align-self: flex-start;
}
.flex-container-div{
width: 500px;
height: 500px;
background: #624F5E;
margin-top: 50px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
/*align-content: space-between;*/
}
.flex-item-div{
width: 100px;
height: 100px;
}
.flex-item-div1{
background: #f00;
align-self: flex-start;
margin-right: auto;
margin-left: auto;
}
.flex-item-div2{
background: #ff0;
}
.flex-item-div3{
background: #f0f;
align-self: flex-end;
}
.flex-item-div4{
background: #0f3;
}
.flex-item-div5{
background: #dd3;
}
.flex-item-div6{
background: #233;
align-self: flex-end;
}
.flex-item-div7{
background: #a3e;
align-self: flex-start;
}
.flex-item-div8{
background: #f0f;
align-self: flex-end;
}
.flex-item-div9{
background: #0f3;
}
.flex-item-div10{
background: #dd3;
}
</style>
<body>
<h3>
以下所有的flex-item都沒有設置width，flex-wrap:wrap;設置可以換行;
flex-direction:column主軸為：垂直從上到下排列，子元素比較多，所以換行排列。
因為沒有設置width，默認會占滿剩余空間。
如果子元素只夠排一列，那么子元素width的值默認是彈性盒子寬度的100%，該寬度就是側軸及其方向
如果子元素排兩列，那么子元素width的值是彈性盒子的寬度的50%，該寬度就是側軸及其方向
如果子元素排三列，那么子元素width的值是彈性盒子的寬度的33.3%，該寬度就是側軸及其方向
如果子元素排四列，那么子元素width的值是彈性盒子的寬度的25%，該寬度就是側軸及其方向
謹記：align-self是相對於側軸及其方向上進行位置設定的。如果子元素側軸寬/高度固定那么該屬性就無效了。
align-self:
auto; 子元素自定拉伸寬度 = 側軸的最大寬度
flex-start; 子元素位於側軸起點
flex-end; 子元素位於側軸終點
center; 子元素位於側軸中間
baseline; 如彈性盒子元素的行內軸與側軸為同一條，
則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
如果沒有設置寬度，那么該子元素的寬度為內容撐開。
stretch; 如果指定側軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，
但同時會遵照'min/max-width/height'屬性的限制。
</h3>
<div class="flex-container">
<span class="flex-item flex-1">flex-item 1</span>
<span class="flex-item flex-2">flex-item 2</span>
<span class="flex-item flex-3">flex-item 3</span>
<span class="flex-item flex-4">flex-item 4</span>
<span class="flex-item flex-5">flex-item 5</span>
<!-- <span class="flex-item flex-6">flex-item 6</span>
<span class="flex-item flex-7">flex-item 7</span>
<span class="flex-item flex-1">flex-item 1</span>
<span class="flex-item flex-2">flex-item 2</span>
<span class="flex-item flex-3">flex-item 3</span>
<span class="flex-item flex-4">flex-item 4</span>
<span class="flex-item flex-5">flex-item 5</span>
<span class="flex-item flex-6">flex-item 6</span>
<span class="flex-item flex-7">flex-item 7</span> -->
</div>
<div class="flex-container-div">
<div class="flex-item-div flex-item-div1">flex-item-div 1</div>
<div class="flex-item-div flex-item-div2">flex-item-div 2</div>
<div class="flex-item-div flex-item-div3">flex-item-div 3</div>
<div class="flex-item-div flex-item-div4">flex-item-div 4</div>
<div class="flex-item-div flex-item-div5">flex-item-div 5</div>
<div class="flex-item-div flex-item-div6">flex-item-div 6</div>
<div class="flex-item-div flex-item-div7">flex-item-div 7</div>
<div class="flex-item-div flex-item-div8">flex-item-div 8</div>
<div class="flex-item-div flex-item-div9">flex-item-div 9</div>
</div>
</body>
</html>
flex 屬性是針對主軸方向上剩余空間進行分配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
flex 屬性用於指定彈性子元素如何分配空間--指：分配主軸一行/一列中剩余的空間。
flex的值可以直接是非負數(即：可以是0，小數，正整數)。
我的理解是：以下三個屬性中只有flex-grow才起作用。所以以下值少做了解即可。
官方各個值解析:
auto: 計算值為 1 1 auto
initial: 計算值為 0 1 auto
none：計算值為 0 0 auto
inherit：從父元素繼承
以上縮寫的三個值分別代表：
[ flex-grow ]：定義彈性盒子元素的擴展比率。
[ flex-shrink ]：定義彈性盒子元素的收縮比率。
[ flex-basis ]：定義彈性盒子元素的默認基准值。
flex-flow:row nowrap;在不可以換行的情況下：
子元素堆疊沒有溢出，且在主軸方向上有多余空間，flex設置才有效。
溢出或沒有空間，flex屬性就是無效的。
flex-flow:row wrap;在可以換行的情況下：
flex屬性是針對在主軸方向上，每一行子元素堆疊剩余空間的分配。
每個子元素最小寬/高不會小於先前已經設定的值。
如果給子元素對象設置一個margin-left值過大而當前行裝不下，則立馬自動換行。
實例：一個彈性盒子中一行有ABC三個子元素堆疊一起(每個元素的寬高都是100px)，沒有溢出
且display:flex; flex-flow:row wrap; 在主軸方向上向左堆疊還剩余200px空間。
1，給子元素分別設置flex屬性 如： A[flex:1] B[flex:2] C[flex:2]
即： 200px/5 = 40px;
A子元素的寬度 = 100px + 40px = 140px;
B子元素的寬度 = 100px + 40px * 2 = 180px;
C子元素的寬度 = 100px + 40px * 2 = 180px;
2，給子元素分別設置flex屬性 如： A[flex:1] B[flex:2] C[flex:2]
即： 200px/5 = 40px;
A子元素的寬度 = 100px + 40px = 140px;
B子元素的寬度 = 100px + 40px * 2 = 180px;
C子元素的寬度 = 100px + 40px * 2 = 180px;
3，其他同上，唯一不同的是彈性盒子里面只有一個元素A。
即： 200px/1 = 200px;
A子元素的寬度 = 100px + 200px * 1 = 300px;
最好的做法：給所有子元素都添加：
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
然后使用開發者工具進行測試即可。
</title>
</head>
<style>
.flex-container{
width: 550px;
height: 440px;
background: #ddd;
/*padding:20px;*/
display: flex;
flex-flow: row wrap;
margin-top: 30px;
}
.flex-item{
width: 100px;
height: 100px;
display: inline-block;
}
.flex-item-1{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#f00;
}
.flex-item-2{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#00f;
}
.flex-item-3{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#ff0;
}
.flex-item-4{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#0ff;
}
.flex-item-5{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#ff0;
}
.flex-item-6{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#00f;
}
.flex-item-7{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#f00;
}
.flex-item-8{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#091D77;
}
.flex-item-9{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#C326C5;
}
.flex-item-10{
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background:#F2A241;
}
.fct{
flex-flow: row nowrap;
}
</style>
<body>
<div class="flex-container">
<span class="flex-item flex-item-1">flex-item 1</span>
<span class="flex-item flex-item-2">flex-item 2</span>
<span class="flex-item flex-item-3">flex-item 3</span>
<span class="flex-item flex-item-4">flex-item 4</span>
<span class="flex-item flex-item-5">flex-item 5</span>
<span class="flex-item flex-item-6">flex-item 6</span>
<span class="flex-item flex-item-7">flex-item 7</span>
<span class="flex-item flex-item-8">flex-item 8</span>
<!-- <span class="flex-item flex-item-9">flex-item 9</span> -->
<!-- <span class="flex-item flex-item-10">flex-item 10</span> -->
</div>
<div class="flex-container fct">
<span class="flex-item flex-item-1">flex-item 1</span>
<span class="flex-item flex-item-2">flex-item 2</span>
<span class="flex-item flex-item-3">flex-item 3</span>
<span class="flex-item flex-item-4">flex-item 4</span>
<span class="flex-item flex-item-5">flex-item 5</span>
<span class="flex-item flex-item-6">flex-item 6</span>
<span class="flex-item flex-item-7">flex-item 7</span>
<span class="flex-item flex-item-8">flex-item 8</span>
<!-- <span class="flex-item flex-item-9">flex-item 9</span> -->
<!-- <span class="flex-item flex-item-10">flex-item 10</span> -->
</div>
</body>
</html>