Кроме изученных нами типов блочных моделей есть еще одна - флекс элементы. Для того, чтобы получить такие элементы, нужно родителю этих элементов написать свойство display в значении flex. Сам родитель останется блочным элементом, а вот его потомки станут флекс элементами.
Флекс элементы, подобно блочным могут иметь ширину и высоту, margin и padding. Однако, в отличие от блочных, по умолчанию флекс элементы выстраиваются в ряд внутри своего родителя.
Давайте попробуем:
<div class="parent">
<span class="child">text</span>
</div>
.parent {
display: flex; /* потомки будут флекс элементами */
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 50px;
height: 50px;
border: 1px solid green;
}
Результат выполнения кода: