1、display:flex
說明： 設定為彈性盒（父元素新增）
2、flex-direction（主軸排列方式）
說明:順序指定了彈性子元素在父容器中的位置
row 預設在一行內排列
row-reverse：反轉橫向排列（右對齊，從後往前排，最後一項排在最前面。
column：縱向排列。
column-reverse：反轉縱向排列，從下往上排，最後一項排在最上面
3、justify-content（主軸對齊方式）
說明： 內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線（main axis）對齊
■ flex-start預設，頂端對齊
■ flex-end末端對齊
■ center居中對齊
■ space-between兩端對齊，中間自動分配
■ space-around自動分配距離
4、align-items（側軸對齊方式）
說明： 側軸對齊方式
flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度）。
baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
5、flex-wrap
說明： 該屬性控制flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。
nowrap：flex容器為單行。該情況下flex子項可能會溢位容器
wrap：flex容器為多行。該情況下flex子項溢位的部分會被放置到新行，子項內部會發生斷行
wrap-reverse：反轉 wrap 排列。
6、align-content（行與行之間對齊方式）
說明： 當伸縮容器的側軸還有多餘空間時，本屬性可以用來調準「伸縮行」在伸縮容器裡的對齊方式，這與調準伸縮專案在主軸上對齊方式的 屬性類似。請注意本屬性在只有一行的伸縮容器上沒有效果。
■ flex-start沒有行間距
■ flex-end底對齊沒有行間距
■ center居中沒有行間距
■ space-between兩端對齊，中間自動分配
■ space-around自動分配距離
7、align-self
說明： align-self 屬性規定靈活容器內被選中專案的對齊方式。
注意：align-self 屬性可重寫靈活容器的 align-items 屬性
auto 預設值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"。
stretch 元素被拉伸以適應容器。
center 元素位於容器的中心。
flex-start 元素位於容器的開頭。
flex-end 元素位於容器的結尾。
8、order
說明： number排序優先順序，數字越大越往後排，預設為0，支援負數。
9、flex
說明： 復合屬性。設定或檢索彈性盒模型物件的子元素如何分配空間。
縮寫「flex: 1」, 則其計算值為「1 1 0%」
縮寫「flex: auto」, 則其計算值為「1 1 auto」
flex: none」, 則其計算值為「0 0 auto」
flex: 0 auto」或者「flex: initial」, 則其計算值為「0 1 auto」，即「flex」初始值
10、flex三個屬性值介紹
flex-grow 乙個數字，規定專案將相對於其他靈活的專案進行擴充套件的量。 flex-shrink 乙個數字，規定專案將相對於其他靈活的專案進行收縮的量。 flex-basis 專案的長度
附：常用的移動端標準布局標準配置
常用的幾種居中方式：
css3彈性盒子（flex布局）
寫在容器上 容器屬性 flex direction 定義內部的排列方向 確定主軸 值 1 row 預設，水平方向，從左到右 2 row reverse 水平方向，從右到左 3 column 顯示為列，垂直方向 從上到下 4 column reverse 顯示為列，垂直方向 從下到上 justify ...
CSS3彈性盒子flex布局方式
一 css3彈性盒子 css3 彈性盒子 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的 提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白空間。二 css3 彈性盒子內容 彈性盒子由彈性容器 和彈性子元素組成。彈性容器通...
Css3 彈性盒子布局
1 flex direction 指定了彈性容器中子元素的排列方式 row 橫向從左到右排列 左對齊 預設的排列方式 row reverse 反轉橫向排列 右對齊，從後往前排，最後一項排在最前面 column 縱向排列 column reverse 反轉縱向排列，從後往前排，最後一項排在最上面。2 ...