學習資料：菜鳥教程；
簡單介紹一下彈性盒子佈局：父級盒子可以有多個子盒子，彈性盒子只定義了子元素如何佈局，不影響盒子內外的渲染；在父級定義該父級爲彈性盒子，父級內的子級盒子全在一行顯示，影響只是佈局，見代碼：
*{
margin: 0;
padding: 0;
}
.big{
display: flex;
}
.big>div{
width: 200px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="big">
<div>列1</div>
<div>列2</div>
<div>列3</div>
<div>列4</div>
<div>列5</div>
<div>列6</div>
</div>
簡單的定義爲彈性盒子；上面代碼默認是從左到右進行排列；
也可以修改從右到左排列；只要設置direction：rtl頁面佈局也就跟着變；
<span style="color:#333333"> .big{
display: flex;
direction: rtl;
}</span>
請欣賞頁面佈局的效果：
flex-direction屬性：順序指定了彈性子元素在父容器中的位置；
flex-direction: row | row-reverse | column | column-reverse-direction: row | row-reverse | column | column-reverse
flex-direction的值有:
- row：橫向從左到右排列（左對齊），默認的排列方式。
- row-reverse：反轉橫向排列（右對齊，從後往前排，最後一項排在最前面。{反序排列；}
- column：縱向排列。
- column-reverse：反轉縱向排列，從後往前排，最後一項排在最上面{反向縱向排列}
.big{
display: flex;
flex-direction: row-reverse;
}//產生的效果與diretion相同；
反向縱向排列：
.big{
display: flex;
flex-direction: column-reverse;
}
看效果圖：
justify-content 屬性
內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿着彈性容器的主軸線（main axis）對齊。
justify-content 語法如下：
justify-content: flex-start | flex-end | center | space-between | space-around-content: flex-start | flex-end | center | space-between | space-around
各個值解析:
- flex-start：（默認值）
彈性項目向行頭緊挨着填充。這個是默認值。第一個彈性項的main-start外邊距邊線被放置在該行的main-start邊線，而後續彈性項依次平齊擺放。
- flex-end：
彈性項目向行尾緊挨着填充。第一個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，而後續彈性項依次平齊擺放。
-
效果圖：（向右對齊）.big{ display: flex; justify-content: flex-end; width: 1300px; height: 300px; border: 1px solid gray; margin: auto; } .big>div{ width: 200px; height: 100px; background: red; } </style> </head> <body> <div class="big"> <div>列1</div> <div>列2</div> <div>列3</div> <div>列4</div> <div>列5</div> <div>列6</div> </div>
- center：(居中)
彈性項目居中緊挨着填充。（如果剩餘的自由空間是負的，則彈性項目將在兩個方向上同時溢出）。
-
.big{ display: flex; justify-content: center; width: 1300px; height: 300px; border: 1px solid gray; margin: auto; }
- space-between：（平均分配空隙）
彈性項目平均分佈在該行上。如果剩餘空間爲負或者只有一個彈性項，則該值等同於flex-start。否則，第1個彈性項的外邊距和行的main-start邊線對齊，而最後1個彈性項的外邊距和行的main-end邊線對齊，然後剩餘的彈性項分佈在該行上，相鄰項目的間隔相等。
-
.big{ display: flex; justify-content: space-between; width: 1300px; height: 300px; border: 1px solid gray; margin: auto; }
- space-around：
彈性項目平均分佈在該行上，兩邊留有一半的間隔空間。如果剩餘空間爲負或者只有一個彈性項，則該值等同於center。否則，彈性項目沿該行分佈，且彼此間隔相等（比如是20px），同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。
.big{ display: flex; justify-content: space-around; width: 1300px; height: 300px; border: 1px solid gray; margin: auto; }
效果圖：
align-items 屬性
align-items 設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。
語法
align-items: flex-start | flex-end | center | baseline | stretch-items: flex-start | flex-end | center | baseline | stretch
各個值解析:
- flex-start（靠着起始邊界）：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
- flex-end（靠着終邊界）：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
-
.big{ display: flex; align-items: flex-end; width: 1300px; height: 300px; border: 1px solid gray; margin: auto; } - center（盒子居中）：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
- baseline：如彈性盒子元素的行內軸與側軸爲同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
- stretch：如果指定側軸大小的屬性值爲'auto'，則其值會使項目的邊距盒的尺寸儘可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。
flex-wrap 屬性
flex-wrap 屬性用於指定彈性盒子的子元素換行方式。
語法
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
各個值解析:
- nowrap - 默認，彈性容器爲單行。該情況下彈性子項可能會溢出容器。
- wrap （多出來的就換行）- 彈性容器爲多行。該情況下彈性子項溢出的部分會被放置到新行，子項內部會發生斷行
- wrap-reverse （多出來的反向換行）-反轉 wrap 排列。
.big{
display: flex;
flex-wrap:wrap-reverse;
width: 1100px;
height: 300px;
border: 1px solid gray;
margin: auto;
}
效果圖：
align-content 屬性
align-content 屬性用於修改 flex-wrap 屬性的行爲。類似於 align-items, 但它不是設置彈性子元素的對齊，而是設置各個行的對齊。
語法
align-content: flex-start | flex-end | center | space-between | space-around | stretch-content: flex-start | flex-end | center | space-between | space-around | stretch
各個值解析:
stretch- 默認。各行將會伸展以佔用剩餘的空間。flex-start- 各行向彈性盒容器的起始位置堆疊。-
.big{ display: flex; align-content:flex-start ; flex-wrap: wrap; width: 1000px; height: 300px; border: 1px solid gray; margin: auto; } flex-end- 各行向彈性盒容器的結束位置堆疊。center-各行向彈性盒容器的中間位置堆疊。space-between-各行在彈性盒容器中平均分佈。space-around- 各行在彈性盒容器中平均分佈，兩端保留子元素與子元素之間間距大小的一半。
彈性子元素屬性
排序（子元素盒子排序）
語法
order: :
各個值解析:
- <integer>：用整數值來定義排列順序，數值小的排在前面。可以爲負值。
order 屬性設置彈性容器內彈性子元素的屬性:
對齊
設置"margin"值爲"auto"值，自動獲取彈性容器中剩餘的空間。所以設置垂直方向margin值爲"auto"，可以使彈性子元素在彈性容器的兩上軸方向都完全集中。
.big{
display: flex;
width: 1300px;
height: 300px;
border: 1px solid gray;
margin: auto;
}
.big>div{
width: 200px;
height: 100px;
background: red;
}
.big>div:first-child{
margin-right: auto;
}
.big>div:last-child{
margin-right: auto;
}
彈性盒子居中：有關於盒子居中問題，下章重點介紹；
.big{
display: flex;
width: 1300px;
height: 300px;
border: 1px solid gray;
margin: auto;
}
.big>div{
width: 200px;
height: 100px;
background: red;
}
.big>div:first-child{
margin: auto;
}
有更多的彈性盒子，見菜鳥教程：
http://www.runoob.com/css3/css3-flexbox.html