1

背景: 8 つの画像を一列に並べる Bootstrap 3 の方法

私は今、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代替画像を紹介したいと思います。picture要素でそれを行っていると思います。

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 の場合のように、CSS 形式を PICTURE 3 列にする方法がわかりません。私は何が欠けていますか？

4

1 に答える 1

0

フレックス コンテナーを作成すると、子要素のみがフレックス アイテムになります。子を超える子孫はフレックス アイテムにはならず、フレックス プロパティはそれらに適用されません。

最初の例では、bodyはフレックス コンテナでimgあり、フレックス アイテムです。

ただし、2番目の例でbodyは、フレックスコンテナでpictureあり、フレックスアイテムであり、imgフレックスに関して特別なことは何もありません。通常のインライン要素です。

pictureイメージ要素にフレックス プロパティを適用するには、(ネストされた) フレックス コンテナーを作成する必要があります。しかし、あなたの場合、これは必要ないかもしれません。

また、picture要素はまだ普遍的にサポートされていないことに注意してください ( caniuse.comを参照)。

最初のデモ: DEMO 1

2 番目のデモ、改訂: DEMO 2

于 2015-12-12T05:09:27.627 に答える