flex 换行布局 且项目高度不一至 不要column 方式排列,这样排列不是我想要的!

clipboard.png

我子项目高度并不一至,我想的下一个项目紧靠上一个项目
flex 换行布局 且项目高度不一至 不要column 方式排列,这样排列不是我想要的!我要的是内容加载后从左到右这样排下去,因为这个内容最多20个 最少3 5个 如果 3 5个的时候用column排列左边,导致右边内容的 从内容上来显示不好看!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            width: 600px;
            height: auto;
            border: 1px solid #dedede;
            margin: 0 auto;
            padding: 0;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            align-items: stretch;
            align-content: flex-start
        }
        .item {
            width: 285px;
            height: 200px;
            background: darkgrey;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item" style="height: 300px;">2</div>
        <div class="item" style="height: 280px;">3</div>
        <div class="item">3</div>
        <div class="item">3</div>
        <div class="item">3</div>
    </div>
</body>
</html>
阅读 6.1k
2 个回答

你想要的是瀑布流布局吧

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题