1

Background: Bootstrap 3 way of laying out 8 images in a row

I now know how to flex 3 images:

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" />

But I want to introduce smaller WebP alternative images and I think you do that with the picture element.

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>

However, I can't figure out how to make the CSS format the PICTUREs 3 abreast like they do with IMG. What am I missing?

Community
  • 1
  • 1
hendry
  • 9,725
  • 18
  • 81
  • 139

1 Answers1

0

When you create a flex container only the child elements become flex items. Descendants beyond the children do not become flex items and flex properties don't apply to them.

In your first example, body is the flex container and img is the flex item.

In your second example, however, body is the flex container, picture is the flex item, and img is, well, nothing special in terms of flex. It's a normal inline element.

You'll need to make picture a (nested) flex container in order to apply flex properties to the image elements. But in your case, this may not be necessary.

Also note that the picture element is not universally supported yet (see caniuse.com).

Your first demo: DEMO 1

Your second demo, revised: DEMO 2

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • For the purpose of providing webp alternatives, `` support is sufficient. Only Safari 9 won't support it, so you can't use it for mime type switching for JPEG2000. – Yoav Weiss Dec 12 '15 at 12:31
  • For answers on this site that you find useful, [consider an upvote](http://stackoverflow.com/help/someone-answers). There's no obligation. Just one way to promote quality content. – Michael Benjamin Dec 23 '16 at 18:45