flex实现流式布局

摘自阮老师的博客点击查看运行效果

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
      * {
        margin: 0;
        padding: 0;
       }
      .parent {
        width: 200px;
        height: 150px;
        background-color: black;
        display: flex;
        flex-flow: row wrap;
        align-content: flex-start;
      }

      .child {
        box-sizing: border-box;
        background-color: white;
        flex: 0 0 25%;
        height: 50px;
        border: 1px dotted grey; 
        list-style: none;
      }
  </style>
</head>
<body>
  <ul class="parent">
    <li class="child"></li>
    <li class="child"></li>
    <li class="child"></li>
    <li class="child"></li>
    <li class="child"></li>
    <li class="child"></li>
    <li class="child"></li>
    <li class="child"></li>
    <li class="child"></li>
    <li class="child"></li>
    <li class="child"></li>
    <li class="child"></li>
  </ul>
</body>
</html>

来源：http://www.cnblogs.com/Lewiskycc/p/7111441.html

标签

flex布局

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!