html - 使用 css flexbox 构建列表，其中第一项大于其他项

Question

我想构建一些非常简单的东西，可悲的是非常复杂:-)。我有一个清单。每个项目都需要 1/3 的屏幕，所以它们总是三个并排的项目。但第一项需要屏幕的 2/3。它应该看起来像图片。我不想为此嵌套标签。仅使用 flexbox 是否有可能（因为它也必须在 ReactNative 中工作）？我已经尝试了一切，查看了 flexbox 的规范。但我无法完成这项工作。谢谢你的帮助！

这是布局，它应该是这样的： 布局

标签： htmlcssreact-nativeflexbox

Answer 1

您实际上可以使用float. 只要它只是需要以这种方式排列的第一个元素，这种方法就可以工作。

.container {
  width: 600px;
}
.container::after {
  content: '';
  display: block;
  clear: both;
}

.container > div {
  float: left;
  box-sizing: border-box;
  padding: 1px;
}
.inner {
  width: 100%;
  padding-bottom: 100%;
  background: black;
}
.one-third {
  width: 33.333333333%;
}
.two-thirds {
  width: 66.66666666%;
}

<div class="container">
<div class="two-thirds"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
</div>