flex實現三列布局


css3新引入的flex在某些情況下布局非常實用

因為它是彈性盒子所以自適應效果會很棒

不過各項布局方案還是各有優劣

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex三列布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #head{
            width: 100%;
            height: 100px;
            border: 1px solid;
            background-color: red;
        }
        #content{
            width: 100%;
            border: 1px solid;
            display: flex;
        }
        #content>.item:nth-child(1){
            order: 2;
            word-wrap:break-word;
            flex: 1;
        }
        #content>.item:nth-child(2){
            min-width: 300px;
            order: 1;
        }
        #content>.item:nth-child(3){
            min-width: 300px;
            order: 3;
        }
        #footer{
            width: 100%;
            height: 100px;
            border: 1px solid;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="head"></div>
<div id="content">
    <div class="item">middlemiddlemiddlemiddlemiddlemiddlem
        ddlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlmiddle
        middlemiddlemiddlemiddlemiddlemiddlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemi
        dlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlmiddlemiddlemiddlemiddlemiddlemiddl
        emiddlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemi
        ddlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemiddlemid
        dlmiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlmiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlmiddlem
        iddlemiddlemiddlemiddlemiddlemiddlemiddl emiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemidd
        le middlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemi
        ddlemiddlemiddlemiddle</div>
    <div class="item">left</div>

    <div class="item">right</div>
</div>
<div id="footer"></div>
</body>
</html>

實現的是基本版的三列布局

很簡單


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM