美文网首页
使用flex解决自适应N列布局中的两端对齐

使用flex解决自适应N列布局中的两端对齐

作者: luichooy | 来源:发表于2016-06-27 21:11 被阅读74次

    dom结构

    <body>
      <div class="container">
          <div class="item">头条</div>
          <div class="item">推荐</div>
          <div class="item">新闻</div>
          <div class="item">娱乐</div>
          <div class="item">财经</div>
          <div class="item">军事</div>
          <div class="item">汽车</div>
          <div class="item">体育</div>
      </div>
    </body>
    

    css:

    .container{
            padding:20px 10px;
            background:green;
            display:flex;
            justify-content:space-between;
            flex-wrap:wrap;
        }
        .item{
            border:1px solid #000;
            background:#fff;
            margin-bottom:10px;
            text-align:center;
            padding:5px 0;
            box-sizing:border-box;
            width:23%;
        }
    

    相关文章

      网友评论

          本文标题:使用flex解决自适应N列布局中的两端对齐

          本文链接:https://www.haomeiwen.com/subject/yoazdttx.html