首頁 > web前端 > css教學 > 主體

關於彈性盒佈局的介紹(附代碼)

不言
發布: 2018-08-01 14:43:56
原創
2635 人瀏覽過

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

彈性佈局

彈性佈局,又稱為「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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!