怎么实现多行不定列自适应布局_编程技术网-程序员技术内容聚合平台

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

题目描述

每一个盒子宽度高度固定，数量不确定，想让他们自适应在一个大盒子内（宽高auto）。
使用flex布局，当屏幕适中时可以正常显示

但是不是适中时变成这样了

当遇到这情况时想让第二行的1，2也跟着第一行的1,2一样排，该怎么实现呢

题目来源及自己的思路

无

相关代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>demo</title>
    <style type="text/css">
    .container {background: #aaa;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .container > span {
        display: inline-block;
        height: 66px;
        width: 300px;
        background: red;
        margin-bottom: 50px;
       }
    </style>
    
  </head>

  <body>
<div class="container">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>    
    <!-- built files will be auto injected -->
  </body>
</html>

你期待的结果是什么？实际看到的错误信息又是什么？

当遇到二图情况时想让第二行的1，2也跟着第一行的1,2一样排，该怎么实现呢

###

让CSS flex布局最后一行列表左对齐的N种方法(小结)

搜索关键词 css flex 最后一行 靠左