css中的彈性佈局

時間 2019-11-17

標籤 css 彈性佈局欄目 CSS 简体版

原文原文鏈接

需求：多個div從下往上佈局，div垂直居中html

任何一個容器能夠指定爲flex佈局，可是td和th等標籤自己已有佈局，因此重寫display屬性會使元素失去原有的佈局特性佈局

*{flex

display:flexspa

}code

任何一個被設置爲彈性佈局的容器會有兩條抽象的軸，彈性佈局的容器的有如下屬性htm

flex-direction 決定項目主軸的排列方向
- row 主軸方向從左到右排列,主軸爲橫向軸
- row-reverse 主軸方向從右到左排列
- column 主軸爲縱向縱
- column-reverse 交叉軸上從下往上排列

nowarp　　不換行（列），項目的寬高會變化
wrap 換行（列），溢出會順序換行
wrap-reverse 反向排列

flex-flow flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap
justify-content justify-content屬性定義了項目在主軸上的對齊方式。
- flex-start（默認值）：左對齊
- flex-end：右對齊
- center：居中
- space-between：兩端對齊，項目之間的間隔都相等。
- space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。
align-items align-items屬性定義項目在交叉軸上如何對齊
- flex-start：交叉軸的起點對齊。
- flex-end：交叉軸的終點對齊。
- center：交叉軸的中點對齊。
- baseline: 項目的第一行文字的基線對齊。
- stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。
align-content align-content屬性定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。
- flex-start：與交叉軸的起點對齊。
- flex-end：與交叉軸的終點對齊。
- center：與交叉軸的中點對齊。
- space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
- space-around：每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。
- stretch（默認值）：軸線佔滿整個交叉軸。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            width:500px;
            height:500px;
            border: 1px solid #0e90d2;
            display: flex;
            flex-direction:row-reverse;
        }
        .box{
            width:200px;
            height:200px;
            background:#bbbbbb;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
            1
        </div>
        <div class="box">
            2
        </div>
        <div class="box">
            3
        </div>
        <div class="box">
            4
        </div>
        <div class="box">
            5
        </div>

    </div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。