溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

彈性布局flex的基本應(yīng)用示例

發(fā)布時(shí)間：2021-03-12 13:53:15 來(lái)源：億速云 閱讀：257 作者：小新 欄目：web開(kāi)發(fā)

小編給大家分享一下彈性布局flex的基本應(yīng)用示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

如何應(yīng)用彈性布局，代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        .box{
            height:20vh;            
            display: flex;          
        }
        .box div{           
            flex: 1; 
        }
        .box div:last-child{
            flex: 2;
        }
    </style>
</head>
<body>
    <div>
        <div>Document1</div>
        <div>Document2</div>
        <div>Document3</div>
        <div>Document4</div>
        <div>Document5</div>
    </div>    
</body>
</html>

運(yùn)行結(jié)果如下：

彈性布局flex的基本應(yīng)用示例

容器的設(shè)置

flex有6個(gè)屬性可以設(shè)置：

flex-direction:row(主軸由左向右，默認(rèn)) / row-reverse（主軸由右向左） / column （主軸由上向下）/ column-reverse （主軸由下向上）  決定主軸的方向

flex-wrap:nowrap（默認(rèn)，不換行） / wrap(換行) / wrap-reverse(換行，第一行在下方) 決定項(xiàng)目在一條軸線上排不下時(shí)的換行方式

flex-flow：是上面兩個(gè)屬性的簡(jiǎn)寫(xiě)模式 默認(rèn)值：flex-flow：row nowrap。

justify-content：flex-start(默認(rèn)值，左對(duì)齊) / flex-end（右對(duì)齊） / center（居中） / space-between（兩端對(duì)齊，項(xiàng)目之間的間隔相等） /
space-around（每個(gè)項(xiàng)目之間的間隔相等，所以項(xiàng)目之間的間隔比項(xiàng)目與邊框之間的價(jià)格大一倍）; 決定項(xiàng)目在主軸上的對(duì)齊方式。space-between/around在自適應(yīng)調(diào)節(jié)間距時(shí)很有用

align-items：flex-start（交叉軸的起點(diǎn)對(duì)齊） / flex-end（交叉軸的終點(diǎn)對(duì)齊） / center（交叉軸的中點(diǎn)對(duì)齊） / baseline（項(xiàng)目的第一行文字的基線對(duì)齊）/stretch（默認(rèn)值，若項(xiàng)目未設(shè)置高度或設(shè)置為auto，項(xiàng)目將占滿這整個(gè)容器的高度）。 定義項(xiàng)目在交叉軸上的對(duì)齊方式

align-content：flex-start（與交叉軸的起點(diǎn)對(duì)齊） / flex-end（與交叉軸的終點(diǎn)對(duì)齊） / center（與交叉軸的中點(diǎn)對(duì)齊） /
space-between（與交叉軸的兩端對(duì)齊，軸線之間的間隔平均分布） /space-around（每跟軸線兩側(cè)的間隔都相等，所以，軸線之間的間隔比軸線與邊框的間隔大一倍）
/ stretch（默認(rèn)值，軸線占滿整個(gè)交叉軸）。定義多根軸線的對(duì)齊方式，如果項(xiàng)目自有一根軸線，該屬性不起作用

項(xiàng)目的屬性設(shè)置

order：定義項(xiàng)目的排列順序，數(shù)字越小，排列越靠前，默認(rèn)為0.

flex-grow：定義項(xiàng)目的放大比例，默認(rèn)為0，默認(rèn)情況下即使有剩余空間項(xiàng)目也不會(huì)放大。縮放的方向?yàn)閒lex-direction的方向。

flex-shrink：定義項(xiàng)目的縮小比例，默認(rèn)為1，空間不足時(shí)，該項(xiàng)目會(huì)縮小。其值為0表示不縮小.縮放的方向?yàn)閒lex-direction的方向。

flex-basis：定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size），瀏覽器根據(jù)這個(gè)屬性沒(méi)計(jì)算主軸是否有多余空間，默認(rèn)值為 auto，即項(xiàng)目的本來(lái)大小。flex-basis：80px；寬度（方向?yàn)閞ow）設(shè)置為80px；

flex：是上面三個(gè)屬性的簡(jiǎn)寫(xiě)，默認(rèn)值為 0 1 auto.有兩個(gè)快捷值：auto（1 1 auto）和none（0 0 auto）

align-self：該屬性允許耽擱項(xiàng)目與其他項(xiàng)目不同的對(duì)齊方式，課覆蓋align-items的屬性值。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒(méi)有父元素，則為stretch。

align-self：auto / flex-start / flex-end / center /baseline /stretch flex-basis:值為0與auto（默認(rèn)）時(shí)的區(qū)別：前者沒(méi)有將整個(gè)項(xiàng)目進(jìn)行計(jì)算，而后者則是忽略內(nèi)容進(jìn)行算的，所以如果布局是需要的是每個(gè)項(xiàng)目的百分比配置，則應(yīng)當(dāng)將flex-basis設(shè)置為0.

以上是“彈性布局flex的基本應(yīng)用示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

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

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手