1、定義
彈性盒子是 css3 的一種新的布局模式。
css3 彈性盒是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。
引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列、對齊和分配空白空間。
2、css3彈性盒內容
彈性盒子由彈性容器(flex container)和彈性子元素(flex item)組成。
彈性容器通過設定 display 屬性的值為 flex 將其定義為彈性容器。
彈性容器內包含了乙個或多個彈性子元素。
注意： 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內布局。
彈性子元素通常在彈性盒子內一行顯示。預設情況每個容器只有一行。
【例項4.1】
3、父元素上的屬性display:flex;開啟彈性盒
display:flex;屬性設定後子元素預設水平排列
（1）定義
flex-direction 屬性指定了彈性子元素在父容器中的位置。
（2）語法
flex-direction的值有:
row：橫向從左到右排列（左對齊），預設的排列方式。
row-reverse：反轉橫向排列（右對齊，從後往前排，最後一項排在最前面。
column：縱向排列。
column-reverse：反轉縱向排列，從後往前排，最後一項排在最上面。
（3）例項
.flex-container內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線（main axis）對齊
（2）語法
justify-content: flex-start | flex-end | center | space-between | space-around①flex-start：
彈性專案向行頭緊挨著填充。這個是預設值。第乙個彈性項的main-start外邊距邊線被放置在該行的main-start邊線，而後續彈性項依次平齊擺放。
②flex-end：
彈性專案向行尾緊挨著填充。第乙個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，而後續彈性項依次平齊擺放。
③center：
彈性專案居中緊挨著填充。（如果剩餘的自由空間是負的，則彈性專案將在兩個方向上同時溢位）。
④space-between：
彈性專案平均分布在該行上。如果剩餘空間為負或者只有乙個彈性項，則該值等同於flex-start。否則，第1個彈性項的外邊距和行的main-start邊線對齊，而最後1個彈性項的外邊距和行的main-end邊線對齊，然後剩餘的彈性項分布在該行上，相鄰專案的間隔相等。
⑤space-around：
彈性專案平均分布在該行上，兩邊留有一半的間隔空間。如果剩餘空間為負或者只有乙個彈性項，則該值等同於center。否則，彈性專案沿該行分布，且彼此間隔相等（比如是20px），同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。
效果圖展示：
（1）例項
.flex-containeralign-items 設定或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。
（2）語法
align-items: flex-start | flex-end | center①flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
②flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
③center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度）。
（1）例項
4、子元素上的屬性
4.1flex-grow
flex-grow 根據彈性盒子元素所設定的擴充套件因子作為比率來分配剩餘空間。
· 預設為0，即如果存在剩餘空間，也不放大。
· 如果只有乙個子元素設定，那麼按擴充套件因子轉化的百分比對其分配剩餘空間。0.1即10%，1即100%，超出按100%
【例項4-2】
android listview 只顯示一行
今天碰到乙個很詭異的問題 listview裡面的adapter有4行資料，可是在頁面上無論如何只能顯示list.get 0 的資料，其他三項無法顯示。原來，android在layout布局檔案的開頭裡面，有一行這個東西 android layout width fill parent android...
css動畫讓文字一行一行逐漸顯示
這幾天在做乙個年終總結的活動，需要將顯示的內容以動畫的形式逐漸顯示，而且還要使用輪播的效果顯示好幾頁，每頁內容都不同 其實簡單的css就可以實現，但是css 太長，就寫了個迴圈用js實現啦我是在vue的基礎上寫的，1 輪播可以使用外掛程式swiper，使用可以參考 或者我下篇文章介紹 2 每頁輪播頁...
Div在同一行顯示
用div控制元素排版有時候還是弄不明白，不過用 的方式還是比較方便解決的，div排版留著有時間在研究，下面的方式也能解決問題的，可參考下 一般我們在做網頁的時候如果放兩個div，那在顯示的時候這兩個div是在列的方面上顯示的，也就是第二個div顯示在第乙個的下面，如果我們想要讓這兩個div在行的方向...