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