1.彈性盒：css3的一種新的布局方式，
1.改變他所有子一級元素的排列方式(除了子一級的後代元素除外)
2.在你給乙個元素設定display :flex 的時候
=>彈性父級:設定了display :flex 的元素
=>彈性子級:其所有的子級元素
3.在開啟彈性布局以後
a.會得到一條預設的主軸
=>預設方向為水平方向,按照x軸正方向
b.會得到一條預設側軸
=>永遠垂直主軸排列
4.開啟彈性布局後對子元素的影響
a.所有子元素預設全部按照主軸方向排列
=>預設從左向右排列
b.所有子元素預設在主軸方向上沒有長度
=>當主軸為水平的時候,子元素沒有寬度
=>當主軸為垂直的時候,子元素沒有高度
c.所有子元素預設在側軸上填滿長度
=>水平,子元素的高度就是側軸的長度
=>垂直,子元素的高度也是側軸的長度
d.所有子元素再主軸預設得排列方式是
=> 從主軸開始方向向主軸結束方向排列
e.所有子元素預設再側軸開始方向堆疊
=> 預設都是放在側軸開始位置
f.所有子元素永不換行
=> 當一行排列不下得時候, 會自動均勻擠壓所有子元素
=> 直到子元素不能再繼續被擠壓(裡面由內容), 那麼就直接溢位盒子
1.flex-direction 表示主軸方向
=>row:表示水平方向排列 從左往右(預設值)
可選值:
=>row-reverse:表示水平方向排列 從右往左
=>column:表示垂直方向排列 從上到下
=>colum-reverse:表示垂直方向排列,從下到上
2.justify-content 表示主軸方向元素排列方式(不改變元素順序)
=>flex-start:所有元素堆疊在主軸開始的位置(預設值)
可選值:
=>flex-end:所有元素堆疊在主軸結束的位置
=>center:所有元素居中排列
=>space-between:所有空白填充在兩者之間(左右兩個元素頂格)
=>space-around:所有空白環繞在每乙個元素兩邊
=>space-evenly:表示均分所有空白位置(僅ios支援該值)
3.aline-items 表示側軸的排列方式
前提:當子元素沒有換行的時候(僅一行)
=>flex-start:表示排列在側軸開始的位置(預設值)
可選值:
=>flex-end:表示排列在側軸結束的位置
=>center:表示排列在側軸的中心位置
4.flex-wrap 表示是否開啟換行
=>no-wrap:表示不允許換行(預設值)
可選值=>wrap:表示換行
=>換行規則
a.計算要換多少行
b.把側軸均分你需要的份數
c.側軸不會擠壓元素,超出直接溢位
5.aline-content 表示側軸多行排列
前提:得開啟換行
設定規則:
=>每一行當成乙個整體
=>設定的時候以一行為單位
=>以整體側軸來進行設定
可選值=>flex-start:所有單位堆疊在側軸開始
=>flex-exd:所有單位堆疊在側軸結束
=>center:所有單位堆疊在側軸中間
=>space-between:所有側軸上的空白均分在每兩個單位之間
=>space-around: 所有側軸上得空白均勻環繞在每乙個單位得兩邊
=>space-evenly: 所有側軸上得單位均勻分布在中間位置
1.aline-self 表示自己單獨乙個元素的側軸排列方式
預設:跟隨父級的側軸排列方式
可選值=>start: 表示自身單獨排列在側軸開始位置
=>end: 表示自身單獨排列在側軸結束位置
=>center: 表示自身單獨排列在側軸中間位置
2.flex 表示自己佔剩餘總體的多少份
=>flex:數字
=>每乙個子元素都可以設定 felx 也可以不設定
+ 需要把所有設定了 felx 屬性得元素得值 求和
+ 每乙個元素上設定得 flex 為幾, 就站 十分之幾
+ 是子元素中所有設定了固定寬度以後得值
+ 彈性寬度
=>當你設定了彈性寬度以後
+ 會有內容擠壓得行為存在
+ 內容擠壓得時候, 優先擠壓 彈性 寬度得元素
+ 直到彈性元素得寬度不能再被擠壓得時候, 擠壓定寬元素
+ 直到所有元素都不能再擠壓得時候, 會溢位
3.order 表示自己所在的排序位置
=>order: 數字;
+ 確定自己得排序位置
+ 設定他們得順序關係
+ 數字越大越向後排列
彈性盒模型布局（FLEX布局）
display flex 新增在伸縮容器 父元素的 flex direction 伸縮布局方向 row 左向右 row reverse 水平返向 column 上向下 column reverse flex wrap 換行 nowrap不換行 預設值 wrap 換行 超出才換行，不超出不換行 wra...
flex彈性盒布局（layout）
1.布局的傳統解決方案，基於盒狀模型，依賴 display屬性 position屬性 float 屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2.2009年，w3c提出了一種新的方案 flex布局，可以簡便 完整 響應式地實現各種頁面布局。3.已經得到了所有瀏覽器的支援 4.fl...
彈性盒模型，flex布局
彈性盒子是css3的一種新布局模式，由容器 父元素 和專案 子元素 組成。彈性盒子是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒模型的目的 提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白區間。設定彈性盒子 display flex或...