css - 使用 flexbox 的 Masonry 网格

标签 css flexbox masonry

我需要这样的 masonry 网格:

masonry grid

是否可以只使用 flexbox 来实现?还是有其他办法? 不想使用 Masonry 库或其他库或框架。

最佳答案

<!doctype html>
<html>
   <head>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
   </head>
   <body>
      <section class="pad-40 " style="background-color: #f1f1f1;height: 546px">
         <div class="container">
            <div class="row">
               <div class="col-md-8">
                  <img src="https://dummyimage.com/600x220/aaa/fff" width="100%">
               </div>
               <div class="col-md-4">
                  <img src="https://dummyimage.com/400x600/aaa/fff" width="100%">
               </div>
               <div class="col-md-4" style="top: -222px;">
                  <img src="https://dummyimage.com/400x255/aaa/fff" width="100%">
               </div>
               <div class="col-md-4" style="top: -222px;">
                  <img src="https://dummyimage.com/400x255/aaa/fff" width="100%">
               </div>
               <div class="col-md-4 ">
               </div>
               <div style="clear:both;"></div>
            </div>
         </div>
      </section>
   </body>
</html>

关于css - 使用 flexbox 的 Masonry 网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41026871/

相关文章:

javascript - Flexbox masonry 响应式

css - 如何更改 mat-toolbar-row 中的样式?

html - 制作特色图片背景图片

html - 如何同步元素的高度

masonry - 在 Masonry onload 中重叠

javascript - 如何在 masonry 之前加载脚本?

html - 响应滚动内容

html - Flexbox "align-items : center"缩小了 child 的最大宽度

html - 均匀地调整内容空间,不将子 div 显示到中心

html - 绝对定位容器中的 Flexbox - 宽度是最宽列的宽度,而不是所有内容