html - 有人可以向我解释这个 flexbox css 问题吗？

Question

演示：https ://codesandbox.io/s/confident-bash-55v3z

我正在按照一些教程进行操作，但遇到了这个问题。代码很简单

我有一个名为 flex 的容器images

<div class='images'>
  <img src='imgs/787.jpg' class="main" />
  <img src='imgs/sub1.jpg' class="sub1" />
  <img src='imgs/sub2.jpg' class="sub2" />
</div>

对于我拥有的样式表

.images {
  width: 234px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  border: 1px solid red;
}

.images > * {
  padding: 1px;
  height: 111px;  <--- this seems like a magic number to me 
}

img.main {
  flex-basis: 99%;
}

img.sub1,
img.sub2 {
  flex-basis: 49%;
}

预期的外观是这样的

但是，当我注释掉该height: 111px;行时，布局已关闭

一般来说，我是 flexbox 和 css 的新手，我知道这flex-basis很柔软min-width。如果没有高度111px，图像将增长到比其min-width（或flex-basis）占据更多空间。

所以我的问题是，为了实现我们想要的正确布局，样式表的原作者是如何知道高度需要的111px？我们可以使用“最大宽度”或其他对我更有意义的技术来实现这种布局吗？

标签： htmlcssflexbox

Answer 1

首先，关于幻数。

您有一个 234 像素宽的容器和两个自然尺寸为 150 像素 x 150 像素的较小图像。它们的组合宽度为 300px，大于容器宽度，因此它们不适合同一行。

我们可以通过缩小它们来解决这个问题。但它们需要有多小？每个图像周围有一个 1px 的填充，对于两个 4 像素的图像。我们需要从容器宽度中减去它。两个图像留下 234 - 4 = 230 像素，或每张图像留下 230 / 2 = 115 像素。

在您的示例中，图像的大小是使用height和控制的flex-basis。同时使用两者会导致比例失真。这实际上发生在您的“预期外观”示例中的顶部图像上。如果将其与原始图像进行比较，您会发现它被垂直压扁了。

height和的交互flex-basis也很不直观。为了实现所需的布局，我们实际上并不需要两者，所以让我们放在flex-basis一边。

当您设置图像的高度而不设置其宽度时，图像将自动按比例缩放。由于我们的图像是正方形的，通过将高度设置为 111 像素，我们也隐式地将宽度设置为 111 像素。由于 111 小于 115，因此两个图像都位于同一行中。数字 111 没有什么神奇之处，任何低于 115 的数字都可以。

我们可以稍微简化一下代码：

.images {
  width: 234px;
  display: flex;
  flex-wrap: wrap; /* allow wrapping, otherwise all 3 images would be in the same row */
  border: 1px solid red;
}

.images > * {
  align-self: flex-start; /* prevent flexbox from stretching items vertically to fill the row */
  box-sizing: border-box; /* include padding into the image width */
  padding: 1px;
}

img.main {
  width: 100%; /* occupy entire row */
}

img.sub1,
img.sub2 {
  width: 50%; /* occupy half of the row */
}

演示：https ://codesandbox.io/embed/focused-faraday-bsd88

尝试将容器的宽度更改为 500 像素或 100 像素。图像将自动缩放并保持其比例。