一、彈性盒模型
1.display：flex
說明：設定為彈性盒（父元素新增）
使用flex布局實現上是使元素ffc化(flex formatting context伸縮格式化上下文)，ffc是普通流的一種；
而浮動流和定位流以及css其他屬性對ffc是有影響的，主要表現在以下幾點:
1）float、clear和vertical-align屬性在伸縮專案上沒有效果
2）伸縮容器的margin與其內容的margin不會重疊
3）text-align屬性在伸縮容器上沒有效果，因為其只可應用於塊級block容器
4）另外，columns屬性伸縮容器上沒有效果
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（航宇行之間的對齊方式）
說明：當伸縮容器的側軸還有多餘空間時，。本屬性可以用來調整伸縮行在容器裡的對齊方式，這與調準整縮專案在主軸上對齊方式的<"justify-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-strat元素位於容器的開頭
flex-end元素位於容器的結尾
ie和safari瀏覽器不支援align-self屬性
8.order
說明：number排序優先順序，數字越大越往後排，預設為0，支援負數
9.flex（flex-grow，flex-shrink，flex-basis）
說明：復合屬性，設定或檢索彈性盒模型物件的子元素如何分配空間；
縮寫（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：專案的長度
彈性盒模型
1.父元素新增display 瀏覽器核心字首 box 2.瀏覽器核心字首 box orient vertical是盒模型的布局方向，預設橫向顯示 3.搜狗是webkit核心，大多相容性與谷歌相同。4.元素布局方向 與float類似 瀏覽器核心字首 box direction reverse 處理剩餘...
彈性盒模型
1 css3彈性盒模型 面試題！1.1 怪異盒模型與標準盒模型 1.1.1 兩者邊框大小一樣，彈性盒模型content大小發生變化。總體不變。標準盒模型content大小不變，總體發生變化。怪異盒模型 box sizing content box 標準盒模型 box sizing border bo...
彈性盒模型
1.flex 靈活性。採用flex布局的元素，flex容器 2.給裝眾多相同盒子的父盒子display flex.將盒子平均分配寬。它所有的子元素就會自動成為這個容器成員，flex專案。當所有子元素的寬大于父元素的寬，則子元素的寬由父盒子決定，平均分配寬。當所有子元素的寬小於父元素的寬，則子元素的寬...