CSS3 Flex Box - Part 5

簡介

在彈性元件 (flex item) 中，尚有數個屬性可以動態的調整彈性元件在主軸 (main axis) 走向的長度。這些屬性在設計自適應 (Responsive Web Design) 的網頁應用時特別有用，根據不同的裝置螢幕大小，各彈性元件可以動態的調整尺寸，以配合螢幕的尺寸，逹到排版的效果。一般來說，在彈性元件使用這幾個屬性時，都不會明確的使用 width, height 如果設定了，也會被 flex-basis 的設定覆蓋；但設定 min-width, min-height 或 max-width, max-height 則會限制其對應於 flex-* 各屬性的作用；例如 flex-shrink 在作用時，縮小的尺寸就不能低於 min-* 的設定，而 flex-grow 在作用時，放大的尺寸也不能高於 max-* 的設定。有些相片或圖形，如果長、寛縮放的比例差距太大，就會造成失真過度，此時就可能會限制縮放時的最小或最大尺寸。

flex-basis

彈性元件在未做任何調整前的基本尺寸。

auto: 以彈性元件的內容決定其基本尺寸。
size: size 是一般用來定義尺寸，具有單位的數值。例： 50%, 100px, 3em 等等。

flex-grow

賦予值為無單位數值，不可為負數，預設值為 1。此數值是一個比例值，代表當有空間剩餘時，將剩餘空間分配給此彈性元件的份額。

flex-shrink

賦予值為無單位數值，不可為負數，預設值為 1。此數值代表一個比例值，代表當空間不足時，將縮減此彈性元件以彌補不足空間的份額。

flex

這個屬性是前三個屬性綜合的簡式寫法。語法為：
flex: flex-grow flex-shrink flex-basis;

配合上其它的排列屬性時，看起來排列方式千變萬化，似乎相當複雜；但只要掌握到要點後，卻也不難理解。首先，以上四個屬性(包含 flex 這個簡式寫法）只作用在主軸走向，對側軸走向沒有作用。
其次，在 flex-wrap:wrap; 的設定下，彈性容器先依照其它各排列屬性的定義排列所有的彈性元件，此時彈性元件的尺寸便以 flex-basis 中的設定值為依據，該換列的換列，該換欄的換欄，該調先後次序的調先後次序，等到所有的彈性元件都就定位了，再一列一列檢查。如果檢查列有多餘的空間存在，便將此列中所有彈性元件的 flex-grow 的值加總，多餘的空間除以加總值便是要分配的單位份額，每一彈性元件再依其 flex-grow 的設定值放大單位份額的量。如此將所有的列或欄走完一遍，排版也就結束了。在 flex-wrap 設定為 wrap 的情況下，因為只要剩餘空間不足以容納下一個要排入的彈性元件，便會換列或換欄，因此不會碰到有空間不足的情況，所以 flex-shrink 的設定也不會有作用。
只有在 flex-wrap:nowrap; 的設定下，彈性容器強迫將所有的彈性元件擠入一列或一欄中，此時才有可能出現空間不足的情況，而 flex-shrink 才能有作用。如果在不換列或換欄的情況下，依然有多餘的空間，則比照上述 flex-grow 的作法分配多餘的空間，若真碰到空間不足的情況，排版方式也不難，先將所有的彈性元件的長度加總，減去彈性容器的內容 (content) 的長度，便是不足的空間；將所有的彈性元件的 flex-shrink 值加總，再將不足空間除以加總值，便是要縮減的單位份額，每一彈性元件再依其 flex-shrink 的設定值縮減相對的單位份額，這樣排版就圓滿結束了。

範例

範例中的彈性容器有五個正方形的彈性元件。上圖是會換列的情況， flex-wrap:wrap; ，彈性元件會放大以填滿彈性容器，第一列中的三個彈性元件 flex-grow 值都為 1 ，所以放大的比例是一樣的。第二列中的編號 4 的彈性元件 flex-grow 值為 3 ，所以在該列中放得比編號 5 大。下圖中則是不換列的情況， flex-wrap:nowrap; ，其中只有編號 5 的彈性元件 flex-shrink 值為 3 ，其它都是 1 ，因此編號 5 的彈性元件縮得特別小。

CSS

<style>
html {
    width:100%;
    height:auto;
    font:normal normal normal 1em Arial, '文泉驛正黑', 'WenQuanYi Zen Hei', '儷黑 Pro', 'LiHei Pro', '微軟正黑體', 'Microsoft JhengHei';
}
body {
    margin: 0 auto;
    width: 800px;
    padding:20px;
}
.container {
    display: flex;
    flex-direction:row;
    flex-wrap:wrap;
    width: 200px;
    padding:20px;
    background-color: lightgreen;
}
.basis {
    flex-basis: 50px;
    height:50px;
    border: 1px solid black;
}
.center {
    display:flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
}
.item_1 {
    flex-grow:1;
    flex-shrink:1;
    background-color: coral;
}
.item_2 {
    flex-grow:1;
    flex-shrink:1;
    background-color: skyblue;
}
.item_3 {
    flex-grow:1;
    flex-shrink:1;
    background-color: hotpink;
}
.item_4 {
    flex-grow:3;
    flex-shrink:1;
    background-color: gold;
}
.item_5 {
    flex-grow:1;
    flex-shrink:3;
    background-color: fuchsia;
}
</style>

.container{} 設定彈性容器的外觀、尺寸和彈性元件的排列方式。
.basis{} 設定彈性元件的基本尺寸及邊框，height 也設定為 50px，如果彈性元件不曾縮放時，元件外觀應為正方形。
.center{} 的設定會將彈性元件的編號置中。
.item_* 設定各彈性元件的縮放比例及背景顏色。

HTML

HTML 中建立一個含有五個彈性元件的彈性容器。

熊伯的外接硬碟

2016年5月10日星期二