关于弹性布局，在segmentfault上看到了一篇讲得很容易理解的文章
<title>无标题文档</title> <style type="text/css"> #flexContainer { width: 250px; border: solid 1px #949494; display:flex; justify-content: space-around; } #item1 { width:50px; background: #66CC33; } #item2 { width:50px; background: #0099FF; } #item3 { width:50px; background: #66CC33; } </style> </head> <body> <div id="flexContainer"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> </div> </body>
justify-content属性和align-content属性对比
<style> #main { width: 70px; height: 300px; border: 1px solid #c3c3c3; display: flex; flex-flow: row wrap; align-content: space-around; } #main div { width: 70px; height: 70px; } </style> </head> <body> <div id="main"> <div style="background-color:coral;"></div> <div style="background-color:lightblue;"></div> <div style="background-color:pink;"></div> </div> </body>
