CSS --- flexbox弹性盒子布局（不用浮动 一行显示）

 

代码如下~

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

 

posted @ 2016-05-05 16:07  __枫伊飘渺  阅读(2309)  评论(0)  编辑  收藏  举报