css中flex彈性布局的使用示例

發(fā)布時(shí)間：2021-01-25 11:00:39 來源：億速云閱讀：151 作者：小新欄目：web開發(fā)

這篇文章主要介紹css中flex彈性布局的使用示例，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

html：

<!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; /*默認(rèn)主軸方向水平向右*/
                flex-direction: row-reverse;  /*可選主軸方向水平向左*/ 
                /* flex-direction: column; */  /*可選主軸方向垂直向下*/
                /* flex-direction: column-reverse; */ /*可選主軸方向垂直向上*/
                
                flex-wrap: wrap;  /*默認(rèn)側(cè)軸方向與主軸垂直方向向下或者右*/
                /* flex-wrap: wrap-reverse; */ /*可選側(cè)軸方向與主軸垂直方向向上或者左*/
            }
            .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>

步驟一：先給父級(jí)容器設(shè)置 display: flex;，代表采用 flex 彈性布局

步驟二：設(shè)置主軸方向
①flex-direction: row；（默認(rèn)參數(shù)）主軸方向水平向右，結(jié)果如圖：

css中flex彈性布局的使用示例

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

css中flex彈性布局的使用示例

③flex-direction: column;（可選參數(shù)）主軸方向垂直向下，結(jié)果自行腦補(bǔ)（主要是太長(zhǎng)了/偷笑）

④flex-direction: column-reverse;（可選參數(shù)）主軸方向垂直向上，同理

步驟三：設(shè)置側(cè)軸方向

①flex-wrap: wrap;默認(rèn)側(cè)軸方向與主軸垂直方向向下或者右，結(jié)果如圖：

css中flex彈性布局的使用示例

②flex-wrap: wrap-reverse;可選側(cè)軸方向與主軸垂直方向向上或者左,結(jié)果腦補(bǔ)

注意：側(cè)軸的方向是隨主軸的變化的，主軸于側(cè)軸總是垂直，兩軸的方向默認(rèn)向右、下

其他屬性設(shè)置：

flex-flow:<flex-direction> <flex-wrap> 是這兩個(gè)屬性的簡(jiǎn)寫，雙參數(shù)時(shí)是主軸方向+側(cè)軸方向，兩個(gè)參數(shù)空格隔開；單參數(shù)時(shí)是主軸方向。

order:number 伸縮項(xiàng)，例如給子容器添加一個(gè)order：1,所有子容器的默認(rèn)order都為0，我們給第一個(gè)容器order設(shè)置為1時(shí)會(huì)產(chǎn)生類似于排序的效果

css中flex彈性布局的使用示例

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

以上是“css中flex彈性布局的使用示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

css中flex彈性布局的使用示例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽