關於伸縮盒模型 Flexible Box 的佈局

阿新 • • 發佈：2019-01-13

這就是傳說中的伸縮盒模型：Flexible Box：display:flex或者display:inline-flex,對於相容IE：加-ms-字首，對於相容Safari：加-webkit-字首。

等下要演示的相關屬性有：flex,flex-basis,flex-direction,flex-wrap,flex-grow,flex-shrink,flex-flow,order,align-items,align-self,justify-content，好了，下面就是見證奇蹟的時刻！

網上找來的瀏覽器對於伸縮盒模型的相容圖：

看上去相容性好像很不錯的樣子是不是？^_^

下面是各種demo的展示環節：

1.flex屬性，其值一般設為數字。

下面是一個demo1：

<!doctype html>
<html>
<head>
<style type="text/css">
*{margin: 0;padding: 0;}
.container{
	display: flex;
	width: 1000px;
	height: 500px;
	background-color: #9fc2e9;
	margin:0 auto;
}
.item1{
	flex:1;
	background-color: #678cf4;
}
.item2{
	flex:1;
	background-color: #3969f3;
}
.item3{
	flex:1;
	background-color: #1145d9;
}
.item4{
	flex:1;
	background-color: #265af0;
}
.item5{
	flex:1;
	background-color: #0a3ac5;
}
.item6{
	flex:1;
	background-color: #0531ac;
}
</style>
</head>
<body>
<div class="container">
	<div class="item item1"></div>
	<div class="item item2"></div>
	<div class="item item3"></div>
	<div class="item item4"></div>
	<div class="item item5"></div>
	<div class="item item6"></div>
</div>
</body>
</html>

效果：

當然，大多時候我們不一定會希望它們均勻地分佈，那麼怎麼將它們的各自所佔有的空間自定義呢？這就是flex的一大好處：我們直接在數字上修改就好了：

我們將demo1中的.item1和.item2樣式改為：

.item1{
	flex:3;
	background-color: #678cf4;
}
.item2{
	flex:2;
	background-color: #3969f3;
}

其他item的flex仍為1：然後下面是演示的效果：

有時候我們需要整個container充滿螢幕，那麼只要把.container的樣式改為：

.container{
	display: flex;
	width: 100%;
	height: 500px;
	background-color: #9fc2e9;
	margin:0 auto;
}

下面是演示的效果:

2.flex-basis屬性，其值一般為一個長度單位或者一個百分比，規定靈活專案的初始長度。

我們將demo1中的.item1的樣式改為：

.item1{
	flex-basis:100px;
	background-color: #678cf4;
}

其他部分的樣式不變，這樣我們得到的效果就是item1的寬度不是和其他item一樣按比例分配的，而是按照flex-basis規定的給它100px，任憑瀏覽器的解析度如何變化，任憑.container的固定寬度的1000px還是按百分比的100%，.item1一直忠誠地保持著100px的寬度直到海枯石爛。（PS：因為效果圖看不出什麼所以我就不放了^_^）

3.flex-direction屬性，其值為row（預設值。靈活的專案將水平顯示）|row-reverse（與 row 相同水平顯示，但是以相反的順序）|column（靈活的專案將垂直顯示）|column-reverse（與 column 相同垂直顯示，但是以相反的順序）

3.1. flex-direction:row效果與demo1相同，這裡就不累述了。

3.2. flex-direction:row-reverse（我們把這個叫做demo2好了，以區分上面的demo1程式碼段）：

<!doctype html>
<html>
<head>
<style type="text/css">
*{margin: 0;padding: 0;}
.container{
	display: flex;
	flex-direction: row-reverse;
	width: 1000px;
	height: 500px;
	background-color: #9fc2e9;
	margin:0 auto;
}
.item1{
	flex:1;
	background-color: #678cf4;
}
.item2{
	flex:1;
	background-color: #3969f3;
}
.item3{
	flex:1;
	background-color: #1145d9;
}
.item4{
	flex:1;
	background-color: #265af0;
}
.item5{
	flex:1;
	background-color: #0a3ac5;
}
.item6{
	flex:1;
	background-color: #0531ac;
}
</style>
</head>
<body>
<div class="container">
	<div class="item item1">1</div>
	<div class="item item2">2</div>
	<div class="item item3">3</div>
	<div class="item item4">4</div>
	<div class="item item5">5</div>
	<div class="item item6">6</div>
</div>
</body>
</html>

注意我們是把flex-direction屬性加在.container裡面，不是加在.item裡面

下面是演示的效果（注意數字是6，5，4，3，2，1）：

3.3. flex-direction:column

下面是演示的效果（注意數字）：

3.4. flex-direction:column-reverse

下面是演示的效果（注意數字6，5，4，3，2，1）：

4.flex-wrap屬性，其值為nowrap（預設值。規定靈活的專案不拆行或不拆列）|wrap（規定靈活的專案在必要的時候拆行或拆列）|wrap-reverse（靈規定靈活的專案在必要的時候拆行或拆列，但是以相反的順序）

4.1. flex-wrap:nowrap（這裡我們新建一個demo3，width設為400px,height設為200px，每個item設為100px）：

<!doctype html>
<html>
<head>
<style type="text/css">
*{margin: 0;padding: 0;}
.container{
	display: flex;
	width: 400px;
	height: 200px;
	background-color: #9fc2e9;
	margin:0 auto;
}
.item1{
	width:100px;
	background-color: #678cf4;
}
.item2{
	width:100px;
	background-color: #3969f3;
}
.item3{
	width:100px;
	background-color: #1145d9;
}
.item4{
	width:100px;
	background-color: #265af0;
}
.item5{
	width:100px;
	background-color: #0a3ac5;
}
.item6{
	width:100px;
	background-color: #0531ac;
}
</style>
</head>
<body>
<div class="container">
	<div class="item item1">1</div>
	<div class="item item2">2</div>
	<div class="item item3">3</div>
	<div class="item item4">4</div>
	<div class="item item5">5</div>
	<div class="item item6">6</div>
</div>
</body>
</html>

下面是演示的效果：

Oh,my LadyGaga！我們發現雖然每個item是100px，但是在 flex-wrap：nowrap屬性強大的作用下，item的大小自適應了

4.2. flex-wrap:wrap:我們只需要給dmeo3的.container加上flex-wrap:wrap屬性即可

下面是顯示的效果：

4.3. flex-wrap:wrap-reverse就是排序相反，這裡不累述了。

5.flex-grow屬性：規定專案將相對於其他靈活的專案進行擴充套件的量。如其他item的flex:1除了.item2的flex-grow:3，則.item2是其他的item的3倍大。

6.flex-shrink屬性：規定專案將相對於其他靈活的專案進行收縮的量。如其他item的flex:1除了.item2的flex-shrink:3，則.item2是其他的item的1/3倍大。

7.flex-flow屬性：是 flex-direction 和 flex-wrap 屬性的速記屬性。如：flex-flow：row-reserve wrap的效果與flex-direction:row-reserve;flex-wrap:wrap的效果相同。

8.order屬性：規定一個靈活的專案相對於同一容器內其他靈活專案的順序，其值一般為數字

這是一個demo4，注意裡面的每個item都規定了自己的排列順序：

<!doctype html>
<html>
<head>
<style type="text/css">
*{margin: 0;padding: 0;}
.container{
	display: flex;
	width: 1000px;
	height: 500px;
	background-color: #9fc2e9;
	margin:0 auto;
}
.item1{
	flex:1;
	order: 3;
	background-color: #678cf4;
}
.item2{
	flex:1;
	order: 2;
	background-color: #3969f3;
}
.item3{
	flex:1;
	order: 6;
	background-color: #1145d9;
}
.item4{
	flex:1;
	order: 1;
	background-color: #265af0;
}
.item5{
	flex:1;
	order: 5;
	background-color: #0a3ac5;
}
.item6{
	flex:1;
	order: 4;
	background-color: #0531ac;
}
</style>
</head>
<body>
<div class="container">
	<div class="item item1">1</div>
	<div class="item item2">2</div>
	<div class="item item3">3</div>
	<div class="item item4">4</div>
	<div class="item item5">5</div>
	<div class="item item6">6</div>
</div>
</body>
</html>

下面是演示的效果（注意圖中的每個item的排練順序）：

9.aligin-items屬性：規定靈活容器內的各項的預設對齊方式,其值可以為：stretch（預設值。專案被拉伸以適應容器）|center（專案位於容器的中心）|flex-start（專案位於容器的開頭）|flex-end（專案位於容器的結尾）|baseline（專案位於容器的基線上）

我們在demo4的基礎上給.container加上屬性：align-items:center;那麼效果會怎麼樣呢？

下面是演示的效果（我們發現專案居中了，而且專案的高度是隨裡面的內容自適應高度的）：

我們在demo4的基礎上給.item2加上屬性align-self: center;給.item5加上屬性align-self: flex-start;

下面是演示的效果：

10.justify-content屬性：在當靈活容器內的各項沒有佔用主軸上所有可用的空間時對齊容器內的各項（水平）,其值可以為：flex-start（預設值。專案位於容器的開頭）|flex-end（目位於容器的結尾）|center（專案位於容器的中心）|space-between（專案位於各行之間留有空白的容器內）|space-around（專案位於各行之前、之間、之後都留有空白的容器內）

注意：justify-content屬性有效果的前提是，所有的item的加起來的總寬度小於.container的寬度，這樣才算是有可用的空間

下面是一個demo5（我們以justify-content:space-around為例）：

<!doctype html>
<html>
<head>
<style type="text/css">
*{margin: 0;padding: 0;}
.container{
	display: flex;
	justify-content: space-around;
	width: 1000px;
	height: 500px;
	background-color: #9fc2e9;
	margin:0 auto;
}
.item1{
	width: 100px;
	background-color: #678cf4;
}
.item2{
	width: 100px;
	background-color: #3969f3;
}
.item3{
	width: 100px;
	background-color: #1145d9;
}
.item4{
	width: 100px;
	background-color: #265af0;
}
.item5{
	width: 100px;
	background-color: #0a3ac5;
}
.item6{
	width: 100px;
	background-color: #0531ac;
}
</style>
</head>
<body>
<div class="container">
	<div class="item item1">1</div>
	<div class="item item2">2</div>
	<div class="item item3">3</div>
	<div class="item item4">4</div>
	<div class="item item5">5</div>
	<div class="item item6">6</div>
</div>
</body>
</html>

下面是演示的效果：

好了，Flexible Box的一部分常用的屬性就介紹到這裡，還有一些屬性我們不常用到，有興趣的童鞋可以查閱資料更加深入地學習哦~

關於伸縮盒模型 Flexible Box 的佈局

關於伸縮盒模型 Flexible Box 的佈局

CSS3引入了一種新的布局模式——Flexbox布局，即伸縮布局盒（Flexible Box）模型

css display flew 伸縮盒模型

真正的盒模型-border-box

flexible box佈局微部落格戶端發現頁面練習

想要清晰的明白（二）CSS 盒模型Block box與Line box

CSS彈性盒模型(flex box)

CSS3伸縮盒Flexible Box

css3伸縮佈局盒模型

第10章佈局樣式相關-伸縮佈局（Flexible Box）

CSS3 Flex佈局（伸縮佈局盒模型）

彈性盒模型（伸縮布局）

css3基礎 box-sizing 設置盒模型(邊線與padding不改盒子的大小)

CSS - 盒模型佈局 - margin 陷阱（父子、兄弟）

盒模型佈局相關-基礎與語法

【筆記】學習CSS佈局05——盒模型

頁面佈局和css盒模型

CSS-兩種盒模型 box-sizing

邊界圓角盒模型佈局圖片背景精靈圖

第六章2:比CSS盒模型更方便的Flex 佈局語法

關於伸縮盒模型 Flexible Box 的佈局

相關推薦