彈性和模型的布局
display：flex；：是彈性盒模型的布局方式，他既可以適用於容器中，也可以適用於行內元素。是w3c提出的一種新的方案，可以簡便、完整、響應式的實現各種頁面布局。目前，他已經得到了所有瀏覽器的支援。（ie9以上）
1.display設定盒模型
2.justify-content盒模型水平方向對齊方式：
row（預設值）：從左到右排列
row-reverse：row的反方向，從右到左排列，
column：從上到下排列，
column-reverse：column的反方向，從下到上排列
3.元素是否換行flex-wrap:（預設值）：
不換行，wrap：容器單行容不下時，換行排列
wrap-reverse：容器單行容不下時，換行排列。換行方向為wrap時的反方向。
4.專案元素在主軸上的對齊方式justify-content：
flex-start（預設值）：專案間不留空隙，
center：專案在主軸上居中排列，專案間不留空隙。主軸上第乙個專案離主軸起點距離等於最後乙個專案離主軸終點距離，
flex-end：專案對齊主軸終點，專案間不留空隙，
space-between：專案間間距相等，第乙個專案離主軸起點和最後乙個專案離主軸終點距離為0。
5.元素在交叉軸的對齊方式align-items：
space-around：與space-between相似，
space-evenly：專案間間距、第乙個專案離主軸起點和最後乙個專案離主軸終點距離等於專案間間距。
不同點為，第乙個專案離主軸起點和最後乙個專案離主軸終點距離為中間專案間間距的一半。
6.多行元素在交叉軸的對齊方式align-content:stretch
（預設值）：當未設定專案尺寸，專案拉伸至填滿行高。
flex-start：專案頂部與行起點對齊。
center：專案在行中居中對齊。
7.align-items屬性值：
flex-end：專案底部與行終點對齊。
baseline：專案的第一行文字的基線對齊，以子元素的第一行文字對齊。
align-content 屬性多行元素在交叉軸的對齊方式:
stretch（預設值）：當未設定專案尺寸，專案拉伸至填滿交叉軸。當設定了專案尺寸，專案尺寸不變，專案行拉伸至填滿交叉軸。
8.flex-start：首行在交叉軸起點開始排列，行間不留間距
center：行在交叉軸中點排列，行間不留間距，首行離交叉軸起點和尾行離交叉軸終點距離相等
asdasdsa
asdasdsa
asdasdsa
```只供參考
Web前端學習筆記 彈性盒
flex 彈性盒 伸縮盒 是css中的又一種布局手段，它主要用來代替浮動來完成頁面的布局 flex可以使元素具有彈性，讓元素可以跟隨頁面的大小的改變而改變。彈性容器 要使用彈性盒，必須先將乙個元素設定為彈性容器，我們通過display來設定彈性容器 display flex 設定為塊級彈性容器 di...
web移動端 彈性盒模型
父元素加 新版彈性盒模型 display flex 設定主軸方向為水平方向 flex direction row 設定主軸方向為垂直方向 flex direction column 老版彈性盒模型 display webkit box 設定主軸方向為水平方向 webkit box orient ho...
彈性盒模型
1.父元素新增display 瀏覽器核心字首 box 2.瀏覽器核心字首 box orient vertical是盒模型的布局方向，預設橫向顯示 3.搜狗是webkit核心，大多相容性與谷歌相同。4.元素布局方向 與float類似 瀏覽器核心字首 box direction reverse 處理剩餘...