css中flex彈性佈局的步驟講解（附代碼）

這篇文章帶給大家的內容是關於css中flex彈性佈局的步驟講解（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

html：

nbsp;html>

    
        <meta>
        <meta>
        <title></title>
        <style>
            *{
                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>
    
    
        <div>
            <div>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>
    

步驟一：先給父級容器設定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: 是這兩個屬性的簡寫，雙參數時為主軸方向側軸方向，兩個參數空格隔開；單參數時為主軸方向。

order:number 伸縮項，例如為子容器新增一個order：1,所有子容器的預設order都為0，我們給第一個容器order設定為1時會產生類似排序的效果

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

以上是css中flex彈性佈局的步驟講解（附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！