图元WebP挠曲

Question

背景：引导3种将8幅图像排成一行的方法

我现在知道如何弯曲3幅图像：

​

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
  align-items: flex-start;
}
img {
  width: 30%;
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
}

<img src="https://placehold.it/1024x768" />
<img src="https://placehold.it/1024x768" />
<img src="https://placehold.it/1024x768" />

​

但是我想介绍一些更小的WebP替代图像，我认为您可以使用图像元素来实现这一点。

​

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
  align-items: flex-start;
}
picture {
  width: 30%;
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
}

<picture>
  <source srcset="http://s.natalian.org/2015-12-12/1024x768.webp" type="image/webp" />
  <img src="https://placehold.it/1024x768" />
</picture>

<picture>
  <source srcset="http://s.natalian.org/2015-12-12/1024x768.webp" type="image/webp" />
  <img src="https://placehold.it/1024x768" />
</picture>

<picture>
  <source srcset="http://s.natalian.org/2015-12-12/1024x768.webp" type="image/webp" />
  <img src="https://placehold.it/1024x768" />
</picture>

​

然而，我不知道如何使CSS格式的图片3并排，就像他们做的IMG。我遗漏了什么？

Answer 1

当您创建一个flex容器时，只有子元素成为flex项。子级以外的后代不会成为flex项，而flex属性不适用于它们。

在您的第一个例子中，body是flex容器，img是flex项。

但是，在您的第二个示例中，body是flex容器，picture是flex项，img在flex方面没有什么特别之处。这是一个正常的内联元素。

您需要使picture成为一个(嵌套的) flex容器，以便将flex属性应用于图像元素。但就你而言，这可能没有必要。

还请注意，picture元素还没有得到普遍支持(参见caniuse.com)。

您的第一个演示：演示1

您的第二个演示，修订版：演示2