CSS3 Flex Box - Part 2

簡介

在瞭解了 flex box 如何排列子元件的大原則後，這篇來討論一下如何調整彈性元件的位置。以下有兩個調整彈性元件位置相關的屬性，兩屬性都擁有三、四個屬性值，組合各屬性及其值的方式很多樣，但掌握大原則後，再寫程式測一下就很容易明白了。

以下的解說用 {flex-direction:row; flex-wrap:wrap;} 的設定為範例來解釋行為模式，其它的設定則可類推。

justify-content

依主軸 (main axis) 的走向為基準（要記住主軸的走向是由 flex-direction 的設定所決定的），在列或欄中調整各彈性元件的位置。

flex-start: 此為預設值。依主軸的走向依次排列彈性元件，排列完後，將整體的起始邊緣對齊向主軸的起點 (main start)，。
flex-end: 依主軸的走向依次排列彈性元件，排列完後，將整體的結束邊緣對齊向主軸的終點 (main end)。
center: 依主軸的走向依次排列彈性元件，排列完後，將整體的中線對齊向主軸的中間點。
space-between: 依主軸的走向依次排列彈性元件，將多餘的空間平均分配在各個彈性元件之間。
space-around: 依主軸的走向依次排列彈性元件，將多餘的空間平均分配在各個彈性元件的兩旁。

align-content

依側軸 (cross axis) 的走向為基準，調整各列或各欄的位置。行為模式和 justify-content 一模一樣，只是 justify-content 以主軸為基準，在各列或各欄中調整各彈性元件在主軸走向的位置；而 align-content 則以側軸為基準，在彈性容器中調整各列或各欄的位置。如果彈性容器中只有一列或一欄時，這個屬性就沒有作用了，當 flex-direction 為 row 或 row-reverse，且彈性容器的 height 設定為 auto 時，因為彈性容器的 height 是計算出來的值，其值會正好等於所有列高的和，也就不會有多餘的空間可以調整，所以不論如何設定，彈性元件的位置看起來都是一樣的。

flex-start: 所有的列或欄，都靠向側軸的起點 (cross start)。這是預設值。
flex-end: 所有的列或欄，都靠向側軸的終點 (cross end)
center: 所有列或欄的整體中線對齊側軸的中間點。
space-between: 將多餘的空間平均分配於各列或各欄之間。
space-around: 將多餘的空間平均分配於各列或各欄的兩旁。

justify-content:flex-start

justify-content:flex-end

justify-content:center

justify-content:space-between

justify-content:space-around

以下的圖片 justify-content 的設定都是 flex-start。

align-content:flex-start

align-content:flex-end

align-content:center

align-content:space-between

align-content:space-around

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;
    justify-content:flex-start;
    align-content:flex-start;
    width: 200px;
    height:150px;
    padding:20px;
    background-color: lightgreen;
}
.center {
    display:flex;
    justify-content: center;
    align-items:center;
}
.item {
    width:40px;
    height:40px;
    border:1px solid black;
    background-color: coral;
    font-size:2em;
}
</style>

.container{} 中 width:200px; 這樣會讓它個彈性元件分成兩列，height:150px; 會讓列高較大，有足夠的空間讓 align-content 屬性可以發揮。只要改變 justify-content 及 align-content 的值，再重新下載網頁，就可以看到彈性元件在彈性容器中不同的排列方式。

HTML

<body>

    1
    2
    3
    4
    5
    6
    7

</body>

熊伯的外接硬碟

2016年5月9日星期一