9.1 屬性 flex-grow
在Flexbox裡，有很多工具可以用來管理Flex容器內元素之間的空間分配。 屬性flex-grow、flex-shrink和flex-basis在控制Flex元素在不同條件下的大小和行為上扮演了關鍵角色。現在我們將詳細探討這些屬性和它們的使用方法。
屬性flex-grow決定了Flex元素增加大小以占據容器中可用空間的能力。flex-grow的值是個係數，指出元素相對於其他Flex元素可以增長的比例。
值：
- 整數或小數值
- 預設值: 0 (元素不增長)
使用範例：
CSS
.container {
display: flex;
border: 2px solid #000;
padding: 10px;
width: 500px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
.grow-1 {
flex-grow: 1;
}
.grow-2 {
flex-grow: 2;
}
HTML
<div class="container">
<div class="item grow-1">元素 1</div>
<div class="item grow-2">元素 2</div>
<div class="item grow-1">元素 3</div>
</div>
代碼說明：
.grow-1: 這些元素有flex-grow: 1;，允許它們均勻增長-
.grow-2: 這個元素有flex-grow: 2;，這讓它能夠比具有flex-grow: 1;的元素增長兩倍
9.2 屬性 flex-shrink
屬性flex-shrink決定了Flex元素在容器空間有限時縮小的能力。flex-shrink的值是個係數，指出元素相對於其他Flex元素可以縮小的比例。
值：
- 整數或小數值
- 預設值: 1 (元素可以縮小)
使用範例：
CSS
.container {
display: flex;
border: 2px solid #000;
padding: 10px;
width: 300px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
width: 150px;
}
.shrink-0 {
flex-shrink: 0;
}
.shrink-1 {
flex-shrink: 1;
}
HTML
<div class="container">
<div class="item shrink-0">元素 1</div>
<div class="item shrink-1">元素 2</div>
<div class="item shrink-1">元素 3</div>
</div>
代碼說明：
.shrink-0: 這個元素有flex-shrink: 0;，不允許它縮小.shrink-1: 這些元素有flex-shrink: 1;，允許它們在需要時縮小
9.3 屬性 flex-basis
屬性flex-basis決定了Flex元素在分配自由空間之前的初始大小。它可以以不同單位設置，如像素、百分比和其他。
值：
- 多種單位的長度 (
px,%,em等) - 預設值:
auto(大小由內容決定)
使用範例：
CSS
.container {
display: flex;
border: 2px solid #000;
padding: 10px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
.basis-auto {
flex-basis: auto;
}
.basis-100px {
flex-basis: 100px;
}
.basis-50percent {
flex-basis: 50%;
}
HTML
<div class="container">
<div class="item basis-auto">元素 1</div>
<div class="item basis-100px">元素 2</div>
<div class="item basis-50percent">元素 3</div>
</div>
代碼說明：
.basis-auto: 這個元素有flex-basis: auto;，意思是它的大小由內容決定.basis-100px: 這個元素有固定的初始大小為100像素.basis-50percent: 這個元素的初始大小是容器寬度的50%
9.4 使用屬性
屬性flex是一個簡寫，可以設置flex-grow、flex-shrink和flex-basis。 它允許在一個屬性中管理所有三個空間分配的方面。
語法：
.container {
flex: [flex-grow] [flex-shrink] [flex-basis];
}
使用範例：
CSS
.container {
display: flex;
border: 2px solid #000;
padding: 10px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
.flex-1 {
flex: 1 1 auto;
}
.flex-2 {
flex: 2 1 100px;
}
.flex-3 {
flex: 1 0 50%;
}
HTML
<div class="container">
<div class="item flex-1">元素 1</div>
<div class="item flex-2">元素 2</div>
<div class="item flex-3">元素 3</div>
</div>
代碼說明：
-
.flex-1: 這個元素有flex: 1 1 auto;，意味著它可以均勻的增長和縮小，初始大小由內容決定 -
.flex-2: 這個元素有flex: 2 1 100px;，意味著它能比具有flex-grow: 1;的元素增長兩倍，能夠縮小且有初始大小100像素 -
.flex-3: 這個元素有flex: 1 0 50%;，意味著它能夠增長但不能縮小，初始大小是容器寬度的50%
GO TO FULL VERSION