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

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

顺晟科技：

HTML

<代码><；DIV类"；父级"；>；<；DIV类="；左内容"；>；<；/DIV>；<；DIV类="；中心内容"；>；<；/DIV>；<；DIV类="；右侧内容"；>；<；/DIV>；<；/DIV>；

CSS

<代码>.父级{宽度：100%；显示：Flex；正当-内容：间隔空间；align-items：拉伸；}.leftContent{显示：Flex；正当-内容：间隔空间；高度：100%；Flex-Direction：列；align-items：拉伸；}.RightContent{显示：Flex；正当-内容：间隔空间；高度：100%；Flex-Direction：列；align-items：拉伸；}

添加DIV中的内容。我想这应该能行。

的东西.

.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类=“容器”>；<；DIV类=“项”>；<；DIV类=“内容”>；一半<；/DIV>；<；DIV类=“内容”>；一半<；/DIV>；<；/DIV>；<；DIV类=“项目内容”>；完整<；/DIV>；<；DIV类=“项”>；<；DIV类=“内容”>；一半<；/DIV>；<；DIV类=“内容”>；一半<；/DIV>；<；/DIV>；<；/DIV>；