1.彈性盒子是css的一種新布局模式
2.代替浮動使布局更加簡便
3.對齊方式包含了水平和垂直方向
4.彈性專案可以通過css重新排序
1.排列
在容器設定flex-direction，其預設值為row,為橫向排列；可選值為column，為縱向排列。
還有一種屬於綜合性設定，flex-flow。
2.設定元素佔比
flex：數字 數字越大，佔比越多
3.設定寬度時也可以使用**flex-basis,**效果與width屬性一樣
1.專案在主軸的對齊方式
justify-content屬性
預設值為flex-start,可選值為flex-end（右對齊），space-between（專案之間的距離相等），space-evenly(元素之間的平均分布)
2.專案在交叉軸的對齊方式（需要設定高度）
設定align-items
可選值為flex-start,flex-end,center,baceline
注：其中baceline可選值使按第一行文字的基線作為標準
3.交叉軸的對齊
設定align-content
可選值為flex-start,flex-end,center,space-between ,space-around,stretch為預設值
在使用這條屬性時，會自動與交叉軸的起點對齊
4.如果想對單個屬性進行設定只需要在元素設定align-self
其所選值與上面相同
5.更改排序
更改元素的排序時可以直接對結構進行排序，但是在彈性布局中我們通常會對元素設定order屬性來進行排序，其預設值為0，數字越小越靠前。
flexbox彈性盒子布局
1.混合劃分 flex 1 flex 1 flex 2 我只有100px 不定寬高，水平垂直居中 2.方法1 可實現螢幕的水平垂直居中 不定寬高的水平垂直居中hhhhhhhhhhhh 方法1方法2 似乎不可實現螢幕的水平垂直居中，只能實現某個容器內的水平垂直居中 容器最好是有寬高 相容性1，ios可...
flex box 彈性盒子布局
flex是什麼 彈性布局 flexible box 模組 目前是w3c候選的推薦 旨在提供乙個更加有效的方式來布置，對齊和分布在容器之間的各項內容，即使它們的大小是未知或者動態變化的。由於flexbox是乙個整體模組，而不是單一的乙個屬性，它涉及到了很多東西，包括它的整個屬性集。它們之中有一些是在父...
flexbox 彈性盒子布局
父元素 display webkit flex 子元素 flex 1 設定佔比 計算規則 父元素會將所有子元素的flex 相加求和後，算其子元素比例。flex混合劃分 第乙個子元素 width 100px 第二個子元素 flex 2 第三個子元素 flex 1 關於不定寬高的水平垂直居中 解決方案 ...