1

背景：Bootstrap 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>

但是，我不知道如何像使用 IMG 一样使 PICTUREs 3 的 CSS 格式并排。我错过了什么？

4

1 回答 1

0

当你创建一个弹性容器时，只有子元素成为弹性项目。孩子之外的后代不会成为弹性项目，弹性属性不适用于它们。

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

然而，在您的第二个示例中，body是 flex 容器，picture是 flex 项，并且在 fleximg方面并没有什么特别之处。这是一个普通的内联元素。

您需要制作picture一个（嵌套的）flex 容器，以便将 flex 属性应用于图像元素。但在你的情况下，这可能没有必要。

另请注意，该picture元素尚未得到普遍支持（请参阅caniuse.com）。

您的第一个演示：DEMO 1

您的第二个演示，已修改：演示 2

于 2015-12-12T05:09:27.627 回答