Размещение флекс элементов в перевернутом ряду в CSS
Сейчас мы начнем изучать продвинутые вещи для работы с флекс элементами. Для начала давайте рассмотрим специальное свойство flex-direction, которое регулирует то, как выстраиваются наши блоки. По умолчанию оно имеет значение row, поэтому элементы выстраиваются в ряд.
Размещение флекс элементов в колонку в CSS
Если в свойстве flex-direction задать значение column, то элементы выстроятся в колонку:
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.child { width: 50px; height: 50px; border: 1px solid green; }
Переворачивание колонки с флекс элементами в CSS
Зададим теперь в свойстве flex-direction значение column-reverse. В этом случае колонка перевернется - элементы будут прижаты к низу. При этом первый элемент будет самым нижним:
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.child { width: 50px; height: 50px; border: 1px solid green; }
Главная и поперечная оси в флекс блоках в CSS
Про флексбоксы можно говорить в двух терминах: первое это - ряд или колонка, второе - в терминах осей. С рядами и колонками мы уже разобрались, давайте теперь разберемся с осями. Понимание осей нужно для того, чтобы выравнивать элементы по горизонтали или по вертикали.
При работе с флекс элементами всегда существует главная ось и поперечная. Мы можем элементы выравнивать по главной оси и поперек главной оси. Главная ось может иметь 4 направления: слева направо, справа налево, сверху вниз и снизу вверх. Направление поперечной оси зависит от направления главной: если главная ось горизонтальна, то поперечная направлена сверху вниз, если главная ось вертикальна, то поперечная направлена слева направо. Других направлений поперечная ось иметь не может.
Направление главной оси регулируется свойством flex-direction. Если данное свойство имеет значение row - главная ось направлена слева направо, если же значение row-reverse, то справа налево. Значение column направляет ось сверху вниз, а значение column-reverse - снизу вверх.
Выравнивание флекс элементов по главной оси в CSS
Свойство justify-content позволяет выравнивать элементы по главной оси. Ранее вы уже проходили значения center, space-between, space-around, space-evenly. Давайте теперь изучим еще несколько значений.
Значение flex-start прижимает элементы к началу главной оси, а значение flex-end - к концу. Давайте посмотрим на примерах.
Выравнивание флекс блоков по поперечной оси в CSS
Давайте теперь будем выравнивать блоки и по поперечной оси. Выравнивание по этой оси задается свойством align-items. Значение flex-start прижимает элементы к началу оси, а значение flex-end - к концу.
Выравнивание отдельного элемента в flex модели в CSS
Следующие свойства, которые мы изучим, задаются уже не родителю флекс-элементов, а самим элементам. Давайте рассмотрим свойство aling-self, которое выраванивает отдельный блок по поперечной оси.
Пусть у нас есть флекс-блоки, выстроенные в ряд. Выровняем их по центру по вертикали, задав align-items в значении center, а второму элементу дадим дополнительный класс elem
и для него зададим другое выравнивание, например, прижмем его к верхнему краю.Для этого нашему элементу с классом elem установим свойство aling-self в значение flex-start:
<div class="child">>1</div>
<div class="child elem">>2</div>
<div class="child">>1</div>
<div class="child">>1</div>
<div class="child">>1</div>
</div>
.child { width: 50px; height: 50px; border: 1px solid green; } .elem { align-self: flex-start; }