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>

实现的是基本版的三列布局

很简单

原文地址：https://www.cnblogs.com/hsBK/p/11088410.html