關於彈性盒佈局的介紹（附代碼）

這篇文章要跟大家介紹的內容是關於彈性盒佈局的介紹（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

彈性佈局

彈性佈局，又稱為「Flex佈局」

彈性佈局的使用

• 為父容器新增display: flex/inline-flex;屬性，即可使容器內容採用彈性佈局顯示，而不遵循常規文件流的顯示方式

• 容器添加彈性佈局後，僅是容器內容採用彈性佈局，而容器本身在文檔流中的定位方式依然遵循常規文檔流；

• display:flex; 容器添加彈性佈局後，顯示為區塊級元素；

display:inline-flex; 容器新增彈性佈局後，顯示為行級元素；

• 設為Flex佈局後，子元素的float、clear和vertical-align屬性將失效。但是position屬性，依然生效。

程式碼如下：

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        
    .box{
        display: flex;
    }
    .box p{
        height: 50vh;
        flex: 1;
    }
    .box p:nth-child(1){
        background: gray;
    }
    .box p:nth-child(2){
        background: green;
    }
    .box p:nth-child(3){
        background: pink;
        flex: 3;
    }
    .box p:nth-child(4){
        background: red;
    }
        
    .box p:nth-child(5){
        background: yellow;
    }
    </style>


    <p>
        </p><p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    

效果圖：

相關推薦：

彈性佈局是什麼？彈性佈局flex的基本應用（附程式碼）

HTML中彈性佈局（Flex）的介紹（附程式碼）

以上是關於彈性盒佈局的介紹（附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！