Flexbox修改flex-item属性以将一个项目堆叠在另一个项目之上

Question

我必须实现以下布局。使用react我试图使用flexbox创建一个通用的gallery组件。所以我在一个包含src，width和height等图像细节的对象上进行迭代。

我创建了这个codepen - https://codepen.io/glenpadua/pen/GxdOwb?editors=1100来尝试复制问题。

有一个width: 1100px的外部容器和一个flex-wrap: wrap的弹性容器。

通过仅向flex项添加属性而不用任何额外的div包装它，是否可以像显示的布局一样堆叠IMG 1和IMG 2？

我不想要任何额外的包装div，因为我试图创建一个通用的可重用React组件。

感谢。

Answer 1

如前所述，如果您想摆脱图像1和2周围包装div的需要，则需要使用CSS Grid。

这是因为FlexBox在技术上只是一维布局工具，因此在需要改变流动方向的地方遇到困难。

对于需要在2D中改变布局的情况，CSS网格要好得多。这里有一个很好的例子：How can I use Flexbox to align two boxes in a column, next to a row?

这是一个快速的例子，可以实现你想要的东西，而无需将前两个框包装在他们自己的div中。

＆＃13;

＆＃13;

.outer {
  background: lightgrey;
  width: 1100px;
}

.inner {
  display: grid;
  flex-wrap: wrap;
}

.a {
  grid-column: 1;
  grid-row: 1 / span 1;
}

.b {
  grid-column: 1;
  grid-row: 2 / span 1;
}

.c {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.d {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.e {
  grid-column: 4;
  grid-row: 1 / span 2;
}

＆＃13;

<div class='outer'>
  <div class="inner">
    <div class="a" style='width: 275px;height: 182px; background: red'>275x182</div>
    <div class="b" style='width: 275px;height: 182px; background: green'>275x182</div>
    <div class='c' style='width: 275px;height: 365px; background: purple'>275x365</div>
    <div class='d' style='width: 275px;height: 365px; background: orange'>275x365</div>
    <div class='e' style='width: 275px;height: 365px; background: papayawhip'>275x365</div>
    <div class='f' style='width: 275px;height: 400px; background: pink'>275x400</div>
    <div class='g' style='width: 275px;height: 400px; background: yellow'>275x400</div>
    <div class='h' style='width: 275px;height: 400px; background: palevioletred'>275x400</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;