1.混合劃分
flex:1
flex:1
flex:2
我只有100px
不定寬高，水平垂直居中
2.方法1：可實現螢幕的水平垂直居中
不定寬高的水平垂直居中hhhhhhhhhhhh
方法1方法2：似乎不可實現螢幕的水平垂直居中，只能實現某個容器內的水平垂直居中(容器最好是有寬高)
相容性1，ios可以使用最新flex布局
2，android4.4以下只能相容舊版本的flexbox布局
3，android4.4及以上，可以使用最新的flex布局
所以，建議使用舊版本相容性的flexbox布局。
屬性替換如下：
新flex布局
舊flexbox布局
display: -webkit-flex;
display: -webkit-flex-box;
justify-content: center;
box-pack: center;
-webkit-flex:1
-webkit-flex-box:1
align-items: center;
box-align: center;
Flexbox彈性盒子布局
1.彈性盒子是css的一種新布局模式 2.代替浮動使布局更加簡便 3.對齊方式包含了水平和垂直方向 4.彈性專案可以通過css重新排序 1.建立容器 在元素身上建立乙個display的宣告，裡面的所有子元素我們稱為flex專案。如下圖所示。1.排列 在容器設定flex direction，其預設值為...
flex box 彈性盒子布局
flex是什麼 彈性布局 flexible box 模組 目前是w3c候選的推薦 旨在提供乙個更加有效的方式來布置，對齊和分布在容器之間的各項內容，即使它們的大小是未知或者動態變化的。由於flexbox是乙個整體模組，而不是單一的乙個屬性，它涉及到了很多東西，包括它的整個屬性集。它們之中有一些是在父...
flexbox 彈性盒子布局
父元素 display webkit flex 子元素 flex 1 設定佔比 計算規則 父元素會將所有子元素的flex 相加求和後，算其子元素比例。flex混合劃分 第乙個子元素 width 100px 第二個子元素 flex 2 第三個子元素 flex 1 關於不定寬高的水平垂直居中 解決方案 ...