CSS3 彈性布局篇

布局的傳統解決方案，基於盒狀模型，依賴display屬性+position屬性+float屬性。它對於那些特殊布局非常不方便。

css3在布局方面做了非常大的改進，使得我們對塊級元素的布局排列變得十分靈活，適應性非常強，其強大的伸縮

性，在響應式開中可以發揮極大的作用。

別名：伸縮布局=彈性布局=伸縮盒布局=彈性盒布局=flex布局

flex是flexible box的縮寫，意為彈性布局，用來為盒狀模型提供最大的靈活性，任何乙個容器都可以

指定為flex布局，不需要轉換盒子型別

採用了flex布局的元素，稱為flex容器，它的子元素稱為flex專案總結flex布局原理：通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式當我們為父元素設為flex布局以後，子元素的float、clear、vertical-align屬性將失效

flex布局沒有外邊距合併

flex布局，分配剩餘空間分配的是內容盒，剩餘空間會先減掉盒子的border、padding 再分配。所以當

子元素均分剩餘空間的時候，它們相等的是內容盒，如果有的盒子設定了邊框、內邊距，那它整體盒子

就會比其它盒子大

display :flex;

/*在父級盒子中申明伸縮布局*/

1.
設定主軸的方向
(預設水平
)flex-direction:
取值：a).
row;
水平方向為主軸
,從左到右排列
(預設的主軸)b
).row-reverse
;水平方向為主軸
,從右到左排列c)
.column
;垂直方向為主軸
,從上到下排列d)
.column-reverse
;垂直方向為主軸
,從下到上排列
注：水平為主軸
,垂直就是側軸
;垂直為主軸
,水平就是側軸
2.控制子元素是否換行顯示
(預設不換行
)flex-wrap:
取值：a).
wrap;換行
,如果一行放不下所有子元素
,則自動換行b)
.nowrap
;不換行
,如果一行放不下子元素
,則平均收縮每個子元素的寬度
(預設不換行)c
).wrap-reverse;翻轉
,原來是從上往下排列
,翻轉後是從下往上排列
(很少用)3.
設定主軸方向
+設定換行顯示
flex-flow:
rowwrap
;水平方向為主軸
,換行顯示
4.設定子元素在主軸上的排列方式
(預設從左到右
)justify-content:
在flex布局中，是分為主軸和側軸兩個方向，同樣的叫法有：行和列、x軸和y軸。預設主軸方向是x軸，y是側軸
取值:a).
flex-start
;讓子元素從父元素起始位置開始排列
(類似於子元素左浮動
)為預設
的排列方式b)
.flex-end
;讓子元素從父元素的結束位置開始排列
(類似於子元素右浮動
)，元素的順序還是從左到右c)
.center
;讓子元素從父元素中間位置開始排列
(類似於所有子元素居中排一起)d
).space-between
;左右對齊，中間平均分頁，產生相同間距e)
.space-around
;將多餘的空間平均分頁在每乙個子元素兩邊
(類似於左右margin
,中間的間距是兩邊的兩倍)f
).space-evenly
;將多餘的空間平均分頁在每乙個子元素兩邊
(類似於左右margin，中間的間距和兩邊一樣大)5.
設定子元素在側軸上的對齊方式（單行子元素）
align-items：
取值：center
;居中對齊
flex-start
;頂部對齊
flex-end
;底部對齊
stretch;拉伸
,讓子元素在側軸方向上拉伸
,填滿整個側軸
,前提是子元素沒有設定高度;(
預設值)
baseline
;按照子元素中文字的基線對齊
(用的很少)6.
設定子元素在側軸上的對齊方式（多行子元素）
align-content：
只能用於子元素出現了換行的情況（多行），在單行沒有效果
取值：flex-start
;在側軸的頭部開始排列（預設值）
flex-end
;在側軸的尾部開始排列
center
;在側軸中間顯示
space-around
;子元素在側軸平分剩餘空間
space-between
;子元素在側軸先分布兩頭，再平分剩餘空間
stretch
;設定子元素高度平分父元素高度

1. 定義子元素在父元素中佔據幾份剩餘空間 flex:1; 會計算所有子元素flex的值 ,然後按值佔的比例分配；預設為 0也可以用百分比 2.定義收縮比例 flex-shrink: 在一行放不下所有子元素而又不換行的情況下 ,子元素會平均收縮比例值計算：當前空間的flex-shrink值 /所有兄弟元素的flex-shrink值的和 (包括當前元素的值 )平均收縮的預設值為1; 表示每個子元素收縮乙份空間 ;不想收縮可以設定為0; 但是有可能會導致子元素溢位 3.擴充套件子元素的寬度 flow-grow: 設定當前元素應該佔據父元素剩餘空間的比例值(1 、2、3. ..); 比例值計算：當前空間的flex-grow值 /所有兄弟元素的flex-grow值的和 (包括當前元素的值 )flow-grow預設值為 0：說明子元素並不會去佔據剩餘空間 4.設定單個元素在側軸方向上的對齊方式（了解） align-self: 取值：center ;居中對齊 flex-start ;頂部對齊 flex-end ;底部對齊 stretch;拉伸 ,讓子元素在側軸方向上拉伸 ,填滿整個側軸 ,前提是子元素沒有設定高度;( 預設值) baseline ;按照子元素中文字的基線對齊 (用的很少)5. 設定子元素的排列順序（了解） order：取值：數值越小，排列越靠前，預設為 0，可以為負數

注意：和z-index不一樣

父元素為flex布局時：

沒有設定高度的子元素與父元素高度一致。

如果父元素設定固定高度，則子元素中沒有設定高度的元素將繼承父元素的高度；

但是如果父元素的align-items設定以後那麼子元素的高度則會有自身內容決定

如果父元素沒有設定高度，其高度由最高的子元素決定。

CSS3 彈性布局篇

CSS3 彈性布局

CSS3彈性布局flex

CSS3彈性盒布局

CSS3 彈性布局篇

CSS3 彈性布局

CSS3彈性布局flex

CSS3彈性盒布局

相關推薦