如果使用旧方法可以达到相同的效果，我应该使用 grid 还是 flexbox？

Question

我正在尝试创建一个 gallery.How 我希望它看起来像：一张图像占网站宽度的 100%，然后是两个 40% 和 60%，再次是 100% e.t.c 我认为网格实际上是一种矫枉过正，不知道使用 flexbox 是否可以实现这种效果。我应该老老实实地去吗float:lef；？

Answer 1

是的，只需 flex: 1 或任何其他数字 see the documentation 即可实现此目的。即使你可以用旧的 float 来做，最好还是用 flexbox 来做，因为它的性能更高。
请参阅 this article 了解有关 flex 性能的 in-depth 详细信息。

Answer 2

这是一个您可以玩的 flex 和 float 示例：

注意：图片确实有正确的比例并排匹配。

如果没有回答您的问题，它应该可以帮助您澄清问题并分享您演示问题的代码。

下面的例子

* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: auto;
  min-width: 0
}

img {
  width: 100%;
  display: block;
}

div:nth-child(3n) {
  flex-grow: 6;
  max-width:62.5%;/* remove this if you want to stack on small screen */
}

div:nth-child(3n - 1) {
  flex-grow: 3.6;
  max-width:37.5%;/* remove this if you want to stack on small screen */
}

div:nth-child(3n - 2) {
  min-width: 100%;
}

<div>
  <img src="https://picsum.photos/id/1001/800/200">
</div>
<div>
  <img src="https://picsum.photos/id/1010/300/200">
</div>
<div>
  <img src="https://picsum.photos/id/1020/500/200">
</div>
<div>
  <img src="https://picsum.photos/id/1005/800/200">
</div>
<div>
  <img src="https://picsum.photos/id/1015/300/200">
</div>
<div>
  <img src="https://picsum.photos/id/1025/500/200">
</div>
<div>
  <img src="https://picsum.photos/id/1012/800/200">
</div>
<div>
  <img src="https://picsum.photos/id/1011/300/200">
</div>
<div>
  <img src="https://picsum.photos/id/1021/500/200">
</div>

网格示例：

body {
  display: grid;
  grid-template-columns: 2fr 3.345fr;
}

img {
  width: 100%;
}

img:nth-child(3n + 1) {
  grid-column: span 2
}

<img src="https://picsum.photos/id/1001/800/200">
<img src="https://picsum.photos/id/1010/300/200">
<img src="https://picsum.photos/id/1020/500/200">
<img src="https://picsum.photos/id/1005/800/200">
<img src="https://picsum.photos/id/1015/300/200">
<img src="https://picsum.photos/id/1025/500/200">
<img src="https://picsum.photos/id/1012/800/200">
<img src="https://picsum.photos/id/1011/300/200">
<img src="https://picsum.photos/id/1021/500/200">

或使用 float 的旧方法：

img {
  width: 100%;
  float: left;
}

img:nth-child(3n - 1) {
  width: 37.5%;
}

img:nth-child(3n) {
  width: 62.5%;
}

<img src="https://picsum.photos/id/1001/800/200">
<img src="https://picsum.photos/id/1010/300/200">
<img src="https://picsum.photos/id/1020/500/200">
<img src="https://picsum.photos/id/1005/800/200">
<img src="https://picsum.photos/id/1015/300/200">
<img src="https://picsum.photos/id/1025/500/200">
<img src="https://picsum.photos/id/1012/800/200">
<img src="https://picsum.photos/id/1011/300/200">
<img src="https://picsum.photos/id/1021/500/200">

如果使用旧方法可以达到相同的效果，我应该使用 grid 还是 flexbox？

Should I use grid or flexbox when I can reach same effect using older method?

html

css

grid

flexbox