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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。