一、css3彈性盒子
css3 彈性盒子：是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。
引入彈性盒布局模型的目的：提供一種更加有效的方式來對乙個容器中的子元素進行排列、對齊和分配空白空間。
二、css3 彈性盒子內容
彈性盒子由彈性容器 和彈性子元素組成。
彈性容器通過設定 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
注意：彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內布局。
三、css3 彈性盒子常用屬性屬性
描述flex-direction
指定彈性容器中子元素排列方式
flex-wrap
設定彈性盒子的子元素超出父容器時是否換行
flex-flow
flex-direction 和 flex-wrap 的簡寫
align-items
設定彈性盒子元素在側軸（縱軸）方向上的對齊方式
align-content
修改 flex-wrap 屬性的行為，類似 align-items, 但不是設定子元素對齊，而是設定行對齊
justify-content
設定彈性盒子元素在主軸（橫軸）方向上的對齊方式
1、flex-direction 屬性：決定專案的方向
注意：如果元素不是彈性盒物件的元素，則 flex-direction 屬性不起作用。
屬性值：值
描述row
預設值。元素將水平顯示，正如乙個行一樣。
row-reverse
與 row 相同，但是以相反的順序
column
元素將垂直顯示，正如乙個列一樣。
column-reverse
與 column 相同，但是以相反的順序。
2、flex-wrap 屬性:規定flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。值描述
nowrap
預設值。規定元素不拆行或不拆列。
wrap
規定元素在必要的時候拆行或拆列。
wrap-reverse
規定元素在必要的時候拆行或拆列，但是以相反的順序
3、flex-flow 屬性：
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
4、align-items屬性：定義flex子項在flex容器的當前行的縱軸方向上的對齊方式。值描述
stretch
預設值。專案被拉伸以適應容器。
center
專案位於容器的中心。
flex-start
專案位於容器的開頭。
flex-end
專案位於容器的結尾。
baseline
專案位於容器的基線上。
5、justify-content屬性：設定或檢索彈性盒子元素在橫軸方向上的對齊方式。值描述
flex-start
預設值。專案位於容器的開頭。
flex-end
專案位於容器的結尾。
center
專案位於容器的中心。
space-between
專案位於各行之間留有空白的容器內。
space-around
專案位於各行之前、之間、之後都留有空白的容器內。
四、彈性子元素屬性：屬性
描述order
設定彈性盒子的子元素排列順序。
flex-grow
設定或檢索彈性盒子元素的擴充套件比率。
flex-shrink
指定了 flex 元素的收縮規則。flex 元素僅在預設寬度之和大於容器的時候才會發生收縮，其收縮的大小是依據 flex-shrink 的值。
flex-basis
用於設定或檢索彈性盒伸縮基準值。
flex
設定彈性盒子的子元素如何分配空間。
align-self
在彈性子元素上使用。覆蓋容器的 align-items 屬性。
1、order屬性：
.flex-container .flex-item2、flex-grow屬性
.flex-container .flex-item3、flex-shrink屬性
.flex-container .flex-item4、flex-basis屬性
.flex-container .flex-itemauto：預設值。長度等於元素的長度。如果該專案未指定長度，則長度將根據內容決定。
5、flex屬性：是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。值描述
flex-grow
乙個數字，規定專案將相對於其他元素進行擴充套件的量。
flex-shrink
乙個數字，規定專案將相對於其他元素進行收縮的量。
flex-basis
專案的長度。合法值：「auto」、「inherit」 或乙個後跟 「%」、「px」、「em」 或任何其他長度單位的數字。
auto
與 1 1 auto 相同。
none
與 0 0 auto 相同。
initial
設定該屬性為它的預設值，即為 0 1 auto。
inherit
從父元素繼承該屬性
6、align-self屬性值
描述auto
預設值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 「stretch」。
stretch
元素被拉伸以適應容器。
center
元素位於容器的中心。
flex-start
元素位於容器的開頭。
flex-end
元素位於容器的結尾。
baseline
元素位於容器的基線上。
initial
設定該屬性為它的預設值。
inherit
從父元素繼承該屬性。
css3彈性盒子（flex布局）
寫在容器上 容器屬性 flex direction 定義內部的排列方向 確定主軸 值 1 row 預設，水平方向，從左到右 2 row reverse 水平方向，從右到左 3 column 顯示為列，垂直方向 從上到下 4 column reverse 顯示為列，垂直方向 從下到上 justify ...
css3彈性盒子 flex布局
1 display flex 說明 設定為彈性盒 父元素新增 2 flex direction 主軸排列方式 說明 順序指定了彈性子元素在父容器中的位置 row 預設在一行內排列 row reverse 反轉橫向排列 右對齊，從後往前排，最後一項排在最前面。column 縱向排列。column re...
Css3 彈性盒子布局
1 flex direction 指定了彈性容器中子元素的排列方式 row 橫向從左到右排列 左對齊 預設的排列方式 row reverse 反轉橫向排列 右對齊，從後往前排，最後一項排在最前面 column 縱向排列 column reverse 反轉縱向排列，從後往前排，最後一項排在最上面。2 ...