父元素：
display: -webkit-flex;
①子元素：
flex：1；（設定佔比）
計算規則： 父元素會將所有子元素的flex 相加求和後，算其子元素比例。
②flex混合劃分；
第乙個子元素 width:100px;
第二個子元素 flex:2
第三個子元素 flex:1
關於不定寬高的水平垂直居中
解決方案：
① 尋常方法
父元素 position: relative；
子元素 position: absolute；
left: 50%；
top: 50%；//在父元素基礎上，往左往上偏移50%
-webkit-tranform:translate(-50%,-50%)；//自身元素往左往上偏移50%
② flexbox版
父元素 display: -webkit-flex; //伸縮布局
justify-content: center; //水平居中
align-items: center; //垂直居中
flexbox 平常屬性--父元素可設定的屬性
1） flex-direction 伸縮方向，
屬性值： ① row(水平預設) ②row-reverse(水平反轉) 在水平方向上伸縮時，比例按寬度走；注意：要設定高度，否則無法顯示。
③ column （垂直） ④ column(垂直反轉) 在垂直方向上伸縮時，比例就是按高度走；注意： body,父元素 height:100%,否則無法顯示。
2） -webkit-flex-wrap 伸縮超出內容是否換行
屬性值： ① nowrap(不換行，預設)
舉例說明： 父元素 width: 400px ,有三個子元素其寬度值分別為：100px, 300px , 400px; 明顯子元素的寬度和大於父元素，由於父元素設定nowrap屬性值後將按1:3:4 比例重新分配400px;
② wrap(換行)，仍然以上個例子為主，第三個子元素就會被換行
③ wrap-reverse，將按第二種方式垂直方向上反轉
3） flex-flow : flex-direction flex-wrap ;//是上面兩個屬性結合在一起編寫
4） justify-content 子元素的橫向排版
屬性值： ① flex-start 父元素伸縮開始的方向 //效果等同於 float: left
② flex-end 父元素伸縮結束的方向 //效果等同於 float： right
③ center 父元素居中
④ space-between 兩邊對其 //左右兩個靠邊，中間的根據個數劃分再放置中間
⑤ space-around 根據間距劃分（根據子元素個數劃分父元素後，再將父元素居中放置）------適合頭像排版
5）align-self 子元素各自的排版（用於子元素的屬性）
詳細說明： 用於覆蓋flex容器中的align-items屬性,它有和align-items相同的屬性值
6） align-items 父元素統一設定子元素的排版
7） align-content 父元素設定子元素換行方式
屬性值： ① flex-start 按照原有的高度自動換行
8） order 排序（用於子元素）
舉例說明： 如果將order:-1,將自動放在最前面
缺點： 相容性
① ios 可以使用最新flex布局
② android 4.4以下，只能相容舊版的flexbox布局
③ android 4.4以上，可以使用最新的flex布局
介於相容性內容，建議使用舊版的flexbox方案，其中屬性替換如下：
新flexbox布局
舊flexbox布局
display: -webkit-flex
display: -webkit-flex-box
-webkit-flex: 1
-webkit-flex-box: 1
justify-content:center
box-pack: center
align-items: center
box-align: center
flexbox彈性盒子布局
1.混合劃分 flex 1 flex 1 flex 2 我只有100px 不定寬高，水平垂直居中 2.方法1 可實現螢幕的水平垂直居中 不定寬高的水平垂直居中hhhhhhhhhhhh 方法1方法2 似乎不可實現螢幕的水平垂直居中，只能實現某個容器內的水平垂直居中 容器最好是有寬高 相容性1，ios可...
Flexbox彈性盒子布局
1.彈性盒子是css的一種新布局模式 2.代替浮動使布局更加簡便 3.對齊方式包含了水平和垂直方向 4.彈性專案可以通過css重新排序 1.建立容器 在元素身上建立乙個display的宣告，裡面的所有子元素我們稱為flex專案。如下圖所示。1.排列 在容器設定flex direction，其預設值為...
flex box 彈性盒子布局
flex是什麼 彈性布局 flexible box 模組 目前是w3c候選的推薦 旨在提供乙個更加有效的方式來布置，對齊和分布在容器之間的各項內容，即使它們的大小是未知或者動態變化的。由於flexbox是乙個整體模組，而不是單一的乙個屬性，它涉及到了很多東西，包括它的整個屬性集。它們之中有一些是在父...