flex实现三列布局

时间 2020-06-18

标签 flex 实现布局栏目 Flex 繁體版

原文原文链接

css3新引入的flex在某些状况下布局很是实用css

由于它是弹性盒子因此自适应效果会很棒html

不过各项布局方案仍是各有优劣css3

<!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>

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

很简单flex