頁面佈局 - flex彈性佈局

時間 2019-12-05

標籤頁面佈局 flex 彈性欄目 Flex 简体版

原文原文鏈接

flex彈性佈局

html：css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .wrap{
                width: 300px;
                height: 300px;
                display: flex;
                flex-direction: row; /*默認主軸方向水平向右*/
                flex-direction: row-reverse;  /*可選主軸方向水平向左*/ 
                /* flex-direction: column; */  /*可選主軸方向垂直向下*/
                /* flex-direction: column-reverse; */ /*可選主軸方向垂直向上*/
                
                flex-wrap: wrap;  /*默認側軸方向與主軸垂直方向向下或者右*/
                /* flex-wrap: wrap-reverse; */ /*可選側軸方向與主軸垂直方向向上或者左*/
            }
            .wrap div{
                background: skyblue;
                text-align: center;
                line-height: 100px;
                width: 100px;
                height: 100px;
                border: bisque 1px solid;
            }
        </style>
    </head>
    <body>
        <div class='wrap'>
            <div"order: 1;">0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </body>
</html>

步驟一：先給父級容器設置 display: flex;，表明採用 flex 彈性佈局
步驟二：設置主軸方向
①flex-direction: row；（默認參數）主軸方向水平向右，結果如圖：

②flex-direction: row-reverse;（可選參數）主軸方向水平向左，結果如圖：

③flex-direction: column;（可選參數）主軸方向垂直向下，結果自行腦補（主要是太長了/偷笑）
④flex-direction: column-reverse;（可選參數）主軸方向垂直向上，同理
步驟三：設置側軸方向
①flex-wrap: wrap;默認側軸方向與主軸垂直方向向下或者右，結果如圖：

②flex-wrap: wrap-reverse;可選側軸方向與主軸垂直方向向上或者左,結果腦補
注意：側軸的方向是隨主軸的變化的，主軸於側軸老是垂直，兩軸的方向默認向右、下
其餘屬性設置：
flex-flow:<flex-direction> <flex-wrap> 是這兩個屬性的簡寫，雙參數時是主軸方向+側軸方向，兩個參數空格隔開；單參數時是主軸方向。
order:number 伸縮項，例如給子容器添加一個order：1,全部子容器的默認order都爲0，咱們給第一個容器order設置爲1時會產生相似於排序的效果

justify-content:flex-start(default)||flex-end||center||space-between||space-around 伸縮容器html

相關標籤/搜索

每日一句

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