使用 flexbox 自定义画廊布局 [重复]答案

【问题标题】：Custom gallery layout with flexbox [duplicate]使用 flexbox 自定义画廊布局 [重复]
【发布时间】：2021-11-17 00:55:09
【问题描述】：

我正在尝试使用 flexbox 创建这种风格的画廊布局，但遇到了一些麻烦。

到目前为止，我的代码是将两个小的和一个大的放在顶行，然后将第二个小的放在底行。

【问题讨论】：

能否请您也粘贴您的代码 sn-p ？它将帮助我们确定问题。
您应该使用网格，因为它更容易实现。查看一些在线网格可视化工具以获取帮助
如前所述使用网格：CSS Grid 和 Flexbox 是布局模型，它们有相似之处，可以一起使用。关键区别在于 CSS Grid 可用于创建二维布局，而 Flexbox 只能用于创建一维布局。这意味着您可以在 CSS Grid 中沿 X 轴和 Y 轴放置组件，而在 Flexbox 中只能放置一个轴。 Read more

标签： html css flexbox gallery

【解决方案1】：

类似的东西。

.container {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.item {
  width: 100%;
  margin: 1em;
}

.content {
  border: 1px solid black;
  margin-bottom: 1em;
  height: 100%;
}

<div class="container">
  <div class="item">
    <div class="content">half</div>
    <div class="content">half</div>
  </div>
  <div class="item content">full</div>
  <div class="item">
    <div class="content">half</div>
    <div class="content">half</div>
  </div>
</div>

【讨论】：

【解决方案2】：

HTML

        <div class"parent">
            <div class="leftContent"></div>
            <div class="centerContent"></div>
            <div class="rightContent"></div>
        </div>

CSS

.parent{
 width: 100%;
 display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.leftContent{
  display: flex;
  justify-content: space-between;
  height: 100%;
  flex-direction: column;
  align-items: stretch;
}
.rightContent{
  display: flex;
  justify-content: space-between;
  height: 100%;
  flex-direction: column;
  align-items: stretch;
}

现在添加 div 中的内容。我认为这应该可行

【讨论】：