css3的flex彈性佈局實現貼邊均勻等分列表

antzone發表於2017-03-07
CSSS3Flex

本章節介紹一下如何使用彈性佈局實現此功能，雖然當前有一定的瀏覽器相容問題，但是實現比較簡單。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style>
* {
  margin:0px;
  padding:0px;
}
.container {
  height:220px;
  overflow:hidden;
}
.container ul{
  margin:0px auto;
  background:#DEF3FF;
  width:625px;
  list-style:none;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
.container li{
  width:100px;
  height:100px;
  margin-bottom:20px;
  background:#ccc;
}
</style>
</head>
<body>
<div class="container">
  <ul>
    <li class="pull-left"></li>
    <li class="pull-left"></li>
    <li class="pull-left"></li>
    <li class="pull-left"></li>
  </ul>
  <ul>
    <li class="pull-left"></li>
    <li class="pull-left"></li>
    <li class="pull-left"></li>
    <li class="pull-left"></li>
  </ul>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，要比普通方式要簡單一些。

更多關於Flex彈性佈局更多內容可以參閱display:flex彈性佈局一章節。

相關文章