CSS3 Flex Box - part 3

簡介

在完成彈性容器中大的排版布局後，現在要看看如何微調彈性元件在列或欄中，於側軸走向上的位置調整。這方面有兩個屬性：align-items 和 align-self。align-items 設定於彈性容器的元件中，所有的彈性元件都會遵循這個設定調整位置；除非在某一或某些彈性元件中有設定 align-self，此時這些彈性元件會脫離 align-items 的設定，而以 align-self 的設定為調整的依據。

align-items

以側軸的走向為基準，調整所有彈性元件在列或欄內的位置。當各彈性元件在側軸走向的長度不一，或在彈性元件的側軸走向的長度是由計算得出時，特別有用。

flex-start: 列或欄中的所有彈性元件，以列或欄的範圍為限，靠近側軸的起點 (cross start) 線。
flex-end: 列或欄中的所有彈性元件，以列或欄的範圍為限，靠近側軸的終點 (cross end) 線。
center: 列或欄中的所有彈性元件，元件的中線對齊列或欄的中心線。彈性元件中若有文字，則不同彈性元件中之文字的底線可能不在同一高度。
baseline: 將列或欄中的彈性元件以元件中的文字底線 (baseline) 為準對齊。這樣會使各彈性元件中之文字的底線在同一個高度上。對齊各彈性元件的文字底線後，所有彈性元件的最邊緣會靠近側軸的起點線。
stretch: 這是預設值。縮放彈性元件在側軸走向的長度以配合彈性容器的側軸長度，倘若彈性元件中有明確的定義側軸走向的長度，例如：側軸走向為垂直，而彈性元件中有明確的定義 height 或 min-height, max-height，則會以定義為優先，不會強制縮放成側軸的長度。

align-self

這個是定義在彈性元件中的屬性，屬性值及作用都和 align-items 一樣，是用來讓單一彈性元件脫離 align-items 的設定，獨立設定該彈性元件的布局方式。

align-items:stretch;

align-items:flex-start;

align-items:flex-end;

align-items:center;

align-items:baseline;

align-items:flex-start; align-self:flex-end;

範例

在範例中建立了六個區塊，區塊中各有一小段文字，其中有兩區塊的文字字型特別小，這樣在做各種不同設定時，可以看出設定間的差別；特別是在設定 align-items：baseline 時，更容易看出是如何以文字的底線對齊的，如果和 align-items:center 的圖片比對，則更容易看出分別。要測試 align-self 時只要在 CSS 宣告中取消 align-self 的註解，更改設定後，重新載入網頁，便可看到改變了。

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;
    align-items: flex-start;
    width: 400px;
    height:150px;
    padding:20px;
    background-color: lightgreen;
}
.normal {
    padding:8px;
    border: 1px solid black;
    background-color: coral;
    font-size: 2em;
}
.blacksheep {
    padding:8px;
    /* align-self:flex-end; */
    border: 1px solid black;
    background-color: skyblue;
    font-size: 1em;
}
</style>

CSS 中，.normal{} 設定了四個彈性元件的外觀，具有比較大的字型。.blacksheep{} 則設定了兩個彈性元件的外觀，具有比較小的字型； align-self 的屬性設定暫時被註解掉了，取消註解後，改變其設定便可以測試 align-self 屬性值所造成的排版效果。

HTML

<body>
    
        Normal
        Blacksheep
        Normal
        Normal
        Normal
        Blacksheep
    
</body>

HTML 中建立了六個區塊，其中有兩個區塊的 CSS 類別為 blacksheep，用來和其它 CSS 類別為 normal 的區塊作區分。

熊伯的外接硬碟

2016年5月10日星期二