導語（我這里的導語就是都是廢話，沒什么用的那種～）：這幾天看了一個移動端的視頻，因為我平時不怎么接觸移動端。但好像移動端里總用到彈性盒子，雖然在pc端也有用，但是用得不多，也不知道為什么。所以，今天正好好好了解下什么是彈性盒子，以及它有什么作用。
彈性盒子：
要點一、彈性盒子其實是由兩部分組成：彈性容器(Flex container)和彈性子元素(Flex item)。
彈性容器：通過設置 display 屬性的值為 flex 或 inline-flex 將其定義為彈性容器。
彈性子元素：彈性容器內包含了一個或多個彈性子元素。
要點二、彈性盒子的作用范圍：
彈性盒子只定義了彈性子元素如何在彈性容器內布局。
也就是說，彈性容器外及彈性子元素內都是正常渲染的。
要點三、1、css 列（CSS columns）在彈性盒子中不起作用。
2、float, clear and vertical-align 在flex項目中不起作用。
要點四、彈性盒子的屬性：
彈性盒子有以下幾個屬性：（我常用的為綠色）
1、display: flex | inline-flex; 2、flex-direction 3、flex-wrap 4、flex-flow 5、justify-content 6、align-items 7、align-content 8、flex-grow 9、flex-shrink 10、flex-basis 11、flex 12、align-self 。
下面，我們來依次介紹他們。
display: flex | inline-flex;
該屬性適用於彈性容器(寫在彈性容器里)。
作用：定義一個彈性容器
flex-direction：
該屬性適用於彈性容器(寫在彈性容器里)。
作用：定義是------設置或檢索伸縮盒對象的子元素在父容器中的位置，即順序指定了彈性子元素在父容器中的位置。
值：
-
-
- row(默認值)：橫向從左到右排列（左對齊），即水平顯示，正如一行一樣。
- row-reverse：反轉橫向排列（右對齊，從后往前排，最后一項排在最前面)。
- column：縱向排列。
- column-reverse：反轉縱向排列，從后往前排，最后一項排在最上面。
-
row:
代碼：
<style> #main { display: flex; flex-direction:row-reverse; } #main div { width: 40px; height: 40px; } </style> </head> <body> <div id="main"> <div style="background-color:coral;">A</div> <div style="background-color:lightblue;">B</div> <div style="background-color:khaki;">C</div> <div style="background-color:pink;">D</div> <div style="background-color:lightgrey;">E</div> <div style="background-color:lightgreen;">F</div> </div>
效果：--------未完待續--------