Почему при использовании свойства flex один элемент растягивается по высоте из-за рядом стоящего?

Question

[dyuisenov]

1. Почему из-за одного элемента растягивается другой рядом стоящий и как это решить?

2. Прописал для цифр (1.2.3) vertical-align: middle, но цифры не изменили своего положения относительно вертикали.
Они должны были встать по центру своих квадратов, как на скриншоте.

<ul class="oportunities-list flex">
					<li class="oportunities-list__item flex">
						<div class="oportunities-list__index">1</div>
						<div class="oportunities-list__content">
							<h3 class="oportunities-list__title">Зарабатывать тысячи долларов</h3>
							<p class="oportunities-list__text">
							Исключительно с помощью веб-дизайна и навыков разработки сайтов
							</p>
						</div>
					</li>

					<li class="oportunities-list__item flex">
						<div class="oportunities-list__index">2</div>
						<div class="oportunities-list__content">
							<h3 class="oportunities-list__title">Работать в путешествиях</h3>
							<p class="oportunities-list__text">
							Без возврата домой, используя ноутбук и все возможности фриланса
							</p>
						</div>
					</li>

					<li class="oportunities-list__item flex">
						<div class="oportunities-list__index">3</div>
						<div class="oportunities-list__content">
							<h3 class="oportunities-list__title">Быть на шаг впереди конкурентов</h3>
							<p class="oportunities-list__text">
							Используя проверенные стратегии развития, общения и работы с клиентами
							</p>
						</div>
					</li>
				</ul>

.oportunities-list {
	display: flex;
	list-style-type: none;
}

.oportunities-list__item {
	display: flex;
}

.oportunities-list__index {
	font-size: 43px ;
	font-weight: 700;
	width: 95px;
	height: 95px;
	border: solid 6px;
	text-align: center;
	vertical-align: middle;

}

Answer 1

[Арсений Матыцин]

align-items по умолчанию stretch. Тебе необходимо указать align-items: center родителю или align-self: center квадрату.

И спеку почитать.

Comments

[dyuisenov]

Почему-то трюк не работает..

[Арсений Матыцин]

dyuisenov, для того, чтобы ты самостоятельно смог дальше разобраться, я и прикрепил ссылку на спеку. Посмотри ее внимательно, чтобы понять, как это все работает. Слева ссылки по теме (если ты с пекарни).

vertical-align, кстати, это табличное свойство для управления инлайновыми элементами в блочных. Если напхать костылей, можно и на нем сделать твой пример, это факт, но твое решение — флексы.

[Арсений Матыцин]

dyuisenov, если что, то у тебя и .oportunities-list__item и .oportunities-list__index должны быть флексами. Управляемыми. Тогда и бокс встанет туда, куда ты его метишь, и цифра внутри бокса.