flex box 彈性盒子布局

flex是什麼

彈性布局（flexible box）模組（目前是w3c候選的推薦）旨在提供乙個更加有效的方式來布置，對齊和分布在容器之間的各項內容，即使它們的大小是未知或者動態變化的。

由於flexbox是乙個整體模組，而不是單一的乙個屬性，它涉及到了很多東西，包括它的整個屬性集。它們之中有一些是在父容器上設定，而有一些則是在子容器上設定。

flexbox布局是最合適的乙個應用程式的元件，以及小規模的布局，而網格布局是用於較大規模的布局。

1、display屬性 (適用於父類容器元素上)定義乙個flex容器，內聯或者根據指定的值，來作用於下面的子類容器。

2、flex-direction (適用於父類容器的元素上）定義：設定或檢索伸縮盒物件的子元素在父容器中的位置。

3、flex-wrap (適用於父類容器上) 設定或檢索伸縮盒物件的子元素超出父容器時是否換行。

4、flex-flow (適用於父類容器上)  復合屬性。設定或檢索伸縮盒物件的子元素排列方式。(本屬性，實為flex-direction屬性和flex-wrap屬性的結合)

5、justify-content (適用於父類容器上)  設定或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。  當彈性盒裡一行上的所有子元素都不能伸縮或已經達到其最大值時，這一屬性可協助對多餘的空間進行分配。當元素溢位某行時，這一屬性同樣會在對齊上進行控制。

6、align-items (適用於父類容器上)   設定或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。

7、align-content (適用於父類容器上) 設定或檢索彈性盒堆疊伸縮行的對齊方式。

8、order (適用於彈性盒模型容器子元素)

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，其預設值為...

flexbox 彈性盒子布局

父元素 display webkit flex 子元素 flex 1 設定佔比 計算規則 父元素會將所有子元素的flex 相加求和後，算其子元素比例。flex混合劃分 第乙個子元素 width 100px 第二個子元素 flex 2 第三個子元素 flex 1 關於不定寬高的水平垂直居中 解決方案 ...