flex实现流式布局

最新推荐文章于 2024-08-11 11:38:56 发布

banqiaoxian4609

最新推荐文章于 2024-08-11 11:38:56 发布

阅读量300

点赞数

原文链接：http://www.cnblogs.com/Lewiskycc/p/7111441.html

版权

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

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

转载于:https://www.cnblogs.com/Lewiskycc/p/7111441.html