相关疑难解决方法(0)

实际上,这是Pinterest布局.但是,在线发现的解决方案包含在列中,这意味着容器无意中水平生长.这不是 Pinterest布局,并且它不适用于动态加载的内容.

我想要做的是有一堆固定宽度和不对称高度的图像,水平放置,但当满足固定宽度容器的限制时包裹在一个新行中:

flexbox可以做到这一点,还是我不得不求助于像Masonry这样的JS解决方案？

我在flex中显示以下布局有困难。我有5个盒子，我想将我的容器一分为二，垂直显示一个盒子，垂直显示另外4个盒子。

这是我的CSS：

.trades, .trade-panel {
    flex: 1;
 }
.layout-4-5 {
    flex-direction: column;
}
.layout-4-5 > div {
    width: 50%;
}

然后，我将第四个或最后一个孩子的基数设置为100％。

.layout-4-5 > div:nth-child(1) {
    flex-basis: 100%;
}

这是我的HTML

<div class="trades layout-4-5">
  <!--trade-panel are my individual boxes --->
  <div class="trade-panel">
    </div>

</div>

上面水平打印我的布局。考虑到“我flex-direction是” column并且我的第一个孩子或盒子有100％的基数，那该打印我想要的东西吗？请任何帮助将不胜感激。

注意：由于这些框的大小相等，因此包含其他四个框的列应更长，只要它们在上面的布置中即可。q