Памятка по флексам
CSS Flexbox Layout
<div class="flex-container">
<div class="flex-element">1</div>
<div class="flex-element">2</div>
<div class="flex-element">3</div>
</div>
Свойства флекс-контейнера
display: flex
Задаёт флекс-контейнер, а его дочерние элементы становятся флекс-элементами.
display: flex;
display: inline-flex;
flex-direction
Задает направление основной оси флекс-контейнера.
flex-wrap
Включает перенос флекс-элементов на следующие строки, если они не помещаются на текущей.
flex-flow
Сокращённое свойство для flex-direction и flex-wrap.
row-gap, column-gap
Отступы между рядами и колонками.
gap
Сокращение для row-gap и column-gap.
Свойства для выравнивания
align-items
Выравнивание флекс-элементов поперёк основной оси (по вертикали).
place-items
Сокращение для align-items и justify-items.
align-content
Выравнивание строк флекс-элементов поперек основной оси (по вертикали).
justify-content
Выравнивание флекс-элементов вдоль основной оси (по горизонтали).
place-content
Сокращение для align-content и justify-content.
Свойства флекс-элементов
order
Изменять порядок вывода флекс-элементов.
flex-grow
Может ли элемент растягиваться (коэффициент растягивания).
flex-shrink
Может ли элемент сжиматься (коэффициент сжатия).
flex-basis
Ширина элемента (начальная?).
flex
Сокращение для flex-grow, flex-shrink и flex-basis.
align-self
Выравнивание флекс-элемента поперек основной оси (по вертикали), переписывает значение align-items.
Примеры применения
Отцентрировать блок
Расположить блок по центру по вертикали и горизонтали.
<div class="flex">
<div class="flex-element">Набери текст</div>
</div>
.flex {
display: flex;
justify-content: center;
align-items: center;
height: 100%
}
Простая галерея
Галерея с перестраиваемыми карточками по центру.
<div class="flex">
<div class="flex-element">Card 1</div>
<div class="flex-element">Card 2</div>
<div class="flex-element">Card 3</div>
</div>
.flex {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
Дата создания: Автор: Олег Миторун