使用 flexbox 的砌体网格答案

【问题标题】：Masonry grid using flexbox使用 flexbox 的砌体网格
【发布时间】：2017-04-22 22:50:50
【问题描述】：

我需要这样的砌体网格：

这是否可以仅使用 flexbox 来实现？还是有其他方式？不想使用 Masonry 库或其他库或框架。

【问题讨论】：

CSS column-count 怎么样？看起来对你有帮助吗？
@Kaysh 可能与flexbox 如果盒子的高度是已知的..
是的，它可能在这里：codepen.io/dudleystorey/pen/eAqzk
一般来说不容易。 Flexbox 具有适合行和列的“项目”，而砌体具有可以以任意方式组合在一起的图块。
@TomMillard 这是一种特殊的、有些有限的砌体版本，它仍然强加柱状结构。

【解决方案1】：

我相信 CSS 网格会成为你的朋友。

CSS Grid 布局为 Web 带来了一个二维布局工具，能够按行和列布局项目。 CSS Grid 可用于实现许多不同的布局。它擅长将页面划分为主要区域，或定义由 HTML 原语构建的控件各部分之间的大小、位置和层之间的关系。

像表格一样，网格布局使作者能够将元素对齐到列和行中。但是，与表格不同的是，网格布局没有内容结构，因此可以实现表格中无法实现的各种布局。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

这是一个有趣且简单的游戏，可帮助您学习和理解 CSS 网格。

http://cssgridgarden.com/

【讨论】：

【解决方案2】：

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

【讨论】：

这里需要内联样式吗？因为在缩小屏幕尺寸的同时，布局很乱。