Leading images in flexbox containers - html

Question

I've been building flexbox containers - actually rows of them - and in some there were leading images. To my surprise something unexpected happens every time I put in one row flexbox containers with leading images and containers of other type (where image doesn't come first).
HTML:
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bam</span>
</div>
<div class="container">
<span>Bom</span>
<span>Bom</span>
</div>
<div class="container">
<span>Bim</span>
<span>Bim</span>
</div>
CSS:
.container {
display: inline-flex;
background-color: tomato;
}
.image {
height: 28px;
}
Please see the following example: https://codepen.io/GuRuGu/pen/KeYGwv
I'd really like to know why it happens as I'm at a loss right now.

Answer 1

Alex's answer is probably the best one, as it's more flexible, but this is a quick alternative: if your images are always a fixed height (in the demo they are 28px) you can make the container elements the same height, and align them with vertical-align (because they are inline elements):
.container {
height: 28px;
vertical-align: bottom;
}

Answer 2

I don't know if it's a solution for you, maybe I misunderstood the issue. But in my opinion, if you want to align all containers, you can wrap all containers with a wrapper and add it a display : flex;. With that configuration, maybe you don't need a display: inline-flex on containers anymore. I let them on the code below, because I don't know what are your limitations.
Here is your code with that modification. I add a .supracontainer class on a div wrapper around your containers. You can control the vertical alignment by using align-items flexbox property on supracontainer class.
.container {
display: inline-flex;
background-color: tomato;
align-items: stretch;
}
.supracontainer{
display: flex;
}
.image {
height: 28px;
}
<h2>Leading images</h2>
<div class="supracontainer">
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bam</span>
</div>
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bom</span>
</div>
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bim</span>
</div>
</div>
<h2>Leading image & empty containers</h2>
<div class="supracontainer">
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bam</span>
</div>
<div class="container">
<span>Bom</span>
<span>Bom</span>
</div>
<div class="container">
<span>Bim</span>
<span>Bim</span>
</div>
</div>
<h2>Trailing image & empty containers</h2>
<div class="supracontainer">
<div class="container">
<span>Bam</span>
</div>
<div class="container">
<span>Bom</span>
</div>
<div class="container">
<span>Bim</span>
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
</div>
</div>
<h2>Leading images & trailing images</h2>
<div class="supracontainer">
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bam</span>
</div>
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bom</span>
</div>
<div class="container">
<span>Bim</span>
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
</div>
<div class="container">
<span>Bim</span>
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
</div>
</div>

Answer 3

You can change item order within a flex element using the order property:
.container {
display: inline-flex;
background-color: tomato;
align-items: stretch;
}
.supracontainer{
display: flex;
}
.image {
height: 28px;
order:0;
}
span{
order:1;
}
<h2>Leading images</h2>
<div class="supracontainer">
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bam</span>
</div>
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bom</span>
</div>
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bim</span>
</div>
</div>
<h2>Leading image & empty containers</h2>
<div class="supracontainer">
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bam</span>
</div>
<div class="container">
<span>Bom</span>
<span>Bom</span>
</div>
<div class="container">
<span>Bim</span>
<span>Bim</span>
</div>
</div>
<h2>Trailing image & empty containers</h2>
<div class="supracontainer">
<div class="container">
<span>Bam</span>
</div>
<div class="container">
<span>Bom</span>
</div>
<div class="container">
<span>Bim</span>
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
</div>
</div>
<h2>Leading images & trailing images</h2>
<div class="supracontainer">
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bam</span>
</div>
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bom</span>
</div>
<div class="container">
<span>Bim</span>
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
</div>
<div class="container">
<span>Bim</span>
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
</div>
</div>