flex 弹性布局

关于弹性布局，在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>

posted on 2015-11-17 20:55 文森博客阅读(157) 评论(0) 编辑收藏举报