Как выровнять на flex?

Question

[denism300]

Есть такая конструкция:

<div class="row no-gutters">
    <div class="col-12 col-md-4">
		<p class="text-center text-uppercase">Заявка по телефону или через сайт</p>    
		<div class="adv-stage-one">
			<img src="assets/img/stage-one.png" alt="Заявка по телефону или через сайт" />
		</div>
    </div>
    <div class="col-12 col-md-4">
		<div class="adv-stage-two">
			<img src="assets/img/stage-two.png" alt="Выезд на объект" />
		</div>   
		<p class="text-center text-uppercase">Выезд на объект</p> 
    </div>
    <div class="col-12 col-md-4">
        <p class="text-center text-uppercase">Заключение договора на разработку и реализацию проекта</p>    
        <div class="adv-stage-three">
            <img src="assets/img/stage-three.png" alt="Заключение договора на разработку и реализацию проекта" />
        </div>                
    </div>
</div>

картинки одинакового размера, количество строк текста разное.
если к классу .row добавить класс .align-items-baseline, то все выровняется по базису, но относительно текста.
А как выровнять по базису относительно всего?
т.е. мне нужно, чтобы и картинки и текст были прижаты к условной горизонтальной линии.

https://jsfiddle.net/denism300/jk6feLrt/1/

Comments

[denism300]

BD_ l3ftoverZ!, уже.

Answer 1

[Adik Izat]

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Comments

[denism300]

правильно. не знаешь ответа - кинь ссылку на ман :)))
я курил ман, не помогло, поэтому, помощи попросил.

[Adik Izat]

denism300, я прост бустрап ненавижу и не использую никогда. Тебе надо выровнять по центру три блока в линию? Пахан:

display: inline-flex; 
align-items: stretch;

Все три дитя:

width: calc(100%  / 3);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;

Изображение дитя:

width: 80%;
height: 15vw;
object-fit: contain;
margin-bottom: 3vh;

Текст дитя:

text-align: center;
width: 100%;
padding: 1vh 2vw;

[denism300]

не-а. выровнять просто. мне надо прижать к горизонтальному базису (красная линия на картинке)

[Adik Izat]

Baseline работает в зависимости от базовой линии первого элемента. Если это текст, то в зависимости от первой строки текста. В теории нужно засунуть в дивку, тогда baseline будет выравниваться в зависимости от нижней линии div.

[denism300]

Adik Izat, не-а. если текст засунуть в див, все равно по тексту выравнивает.

[Adik Izat]

denism300, тогда предлагаю весьма изощренный метод: вставить текст в виде изображения) А ширину изображения с текстом задать в vw.
P.S. Я не мазахист:)