CSS-彈性佈局2-交叉軸

java小工匠發表於2017-06-18
CSS

4.5 align-items

該屬性定義專案在交叉軸上如何對齊。

屬性值 說明
stretch（預設值） 如果專案未設定高度或者設為auto，將佔滿整個容器高度
baseline 專案的第一行文字的基線對齊
flex-start 交叉軸的起點對齊
flex-end 交叉軸的終點對齊
center 交叉軸的中點對齊

原始碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-wrap</title>
    <style type="text/css">
    .wrap{
        width: 200px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        height: 200px;
        align-items: stretch;
        border: 1px solid red;
    }
    div{
        width: 20px;
        margin : 5px;
    }
    .div1{
        padding-top: 10px;
        background: red;
    }
    .div2{
        background: blue;
        
    }
    .div3{
        background: yellow;
        
    }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="div1">測試文字1</div>
        <div class="div2">測試文字22</div>
        <div class="div3">3</div>
    </div>
</body>
</html>

stretch執行結果

stretch執行結果

baseline執行結果

baseline執行結果

flex-start執行結果

flex-start執行結果

flex-end執行結果

flex-end執行結果

center執行結果

center執行結果

**4.7 align-content **
  該屬性定義了多跟軸線的對齊方式。如果專案只有一根軸線，則該屬性不起作用。

屬性值 說明
stretch(預設值) 軸線佔滿整個交叉軸
flex-start 交叉軸的起點對齊
flex-end 交叉軸的終點對齊
center 交叉軸的中點對齊
space-between 與交叉軸兩端對齊，軸線之間的間隔平均分佈
space-around 每根軸線兩側的間隔都相等。所以軸線之間的間隔比邊框的間隔大一倍

原始碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-wrap</title>
    <style type="text/css">
    .wrap{
        width: 200px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        height: 200px;
        align-content: stretch;
        border: 1px solid red;
    }
    div{
        width: 50px;
        margin:5px;
    }
    .div1{
        background: red;
    }
    .div2{
        background: blue;
    }
    .div3{
        background: yellow;
    }
    .div4{
        background: green;
    }
    .div5{
        background: gray;
    }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="div1">1</div>
        <div class="div2">2</div>
        <div class="div3">3</div>
        <div class="div4">4</div>
        <div class="div5">5</div>
    </div>
</body>
</html>

stretch執行結果：

stretch執行結果

flex-start執行結果：

flex-start執行結果

flex-end執行結果：

flex-end執行結果

center執行結果：

center執行結果

space-between執行結果：

space-between執行結果

space-around執行結果：

space-around執行結果


相關文章