CSS --- flexbox彈性盒子佈局（不用浮動一行顯示）

時間 2019-11-12

標籤 css flexbox 彈性盒子佈局不用浮動一行顯示欄目 CSS 简体版

原文原文鏈接

代碼以下~html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
body{ margin:0;}
.box{ display:flex; height:300px; /* flex-direction:column; 豎方向的 */ /*flex-direction:column-reverse; 豎方向倒過來*/}
.div1{ background:red; flex:1}
.div2{ background:blue; flex:2}

</style>
</head>

<body>
<div class="box">
    <div class="div1">111</div>
    <div class="div2">222</div>
</div>
</body>
</html>