Ведущие изображения в контейнерах flexbox

Question

Я строил контейнеры flexbox - фактически их ряды - и в некоторых были начальные изображения.К моему удивлению, что-то неожиданное случается каждый раз, когда я помещаю в один ряд контейнеры flexbox с ведущими изображениями и контейнеры другого типа (где изображение не идет первым).

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;
}

Пожалуйста, посмотрите следующий пример: https://codepen.io/GuRuGu/pen/KeYGwv

Мне бы очень хотелось узнать, почему это происходит, потому что я сейчас в растерянности.

Answer 1

Вы можете изменить порядок элементов в элементе flex, используя свойство order:

.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>

Answer 2

Alex's answer , вероятно, лучший, так как он более гибкий, но это быстрая альтернатива: если ваши изображения всегда имеют фиксированную высоту (в демонстрации они составляют 28 пикселей), вы можете сделать container элемента одинаковой высоты и выровняйте их по vertical-align (потому что они являются встроенными элементами):

.container {
  height: 28px;
  vertical-align: bottom;
}

Answer 3

Я не знаю, если это решение для вас, может быть, я неправильно понял проблему. Но, на мой взгляд, если вы хотите выровнять все контейнеры, вы можете обернуть все контейнеры оболочкой и добавить ее display : flex;. С такой конфигурацией, возможно, вам больше не нужно display: inline-flex для контейнеров. Я включил их в код ниже, потому что я не знаю, каковы ваши ограничения.

Вот ваш код с этой модификацией. Я добавляю .supracontainer класс к оболочке div вокруг ваших контейнеров. Вы можете управлять вертикальным выравниванием, используя свойство align-items flexbox класса supracontainer.

.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>