В данной статье будут показаны все возможность нативного метода Flexbox. Данный метод верстки сайта за счет своей простоты становится все более популярным среди разработчиков. В этой статье я постараюсь в кротчайших деталях разобрать все тонкости метода Flexbox.
Как было сказано ранее Flexbox популярен тем что с его помощью можно с легкостью решить задачи которые требуют много усилий и времени. Например расставить элементы в ряд по вертикали, или разместить по середине родителя, или прижать к низу экрана, или может сделать все объекты одного размера. Все это можно сделать с помощью Flexbox. Меньше воды больше дела, начнем-же разбор нашей прелести)
Подключение Flexbox
На сегодняшний день Flexbox поддерживают все популярные браузеры. Так-что проблем с подключение возникнуть не должно.
Допустим внутри блока-родителя div находятся еще несколько объектов которые нужно разместить по горизонтали. Для этого в подключенном css файле нужно прописать следующую команду.
У любого объекта главной осью всегда является ось Y и поэтому все объекты расположены по вертикали. Подключая свойство flex наша ось поворачивается на 90 градусов, тем самым ось Y расположена горизонтально, а X вертикально.
flex-direction
Cразу после подключение flexbox, главная ось выстраивается вертикально. Связано это с тем что строка flex-direction имеющая два основных свойства (row - вертикально, column - горизонтально) автоматически принимает свойство row.
Также у данного поля есть еще два свойства ( row-reverse и column-reverse) которые очень похожи на предыдущие.
justify-content
Данное поле отвечает за выравнивание элементов относительно главной оси. Justify-content всего имеет 5 свойств:
- center
- flex-start
- flex-end
- space-around
- space-between
align-items
Поле align-items похож на justify-content только по сравнению с ней он работает не с главной осью, а с перпендикулярной ей.
align-self
Также, часто бывает так что каждый элемент нужно выравнивать по отдельности. В таких случаях может помочь align-self.
Как и align-items, данное поле имеет такие-же свойства:
- flex-start
- flex-end
- center
- stretch
- baseline
flex-basis
Flex-basis отвечает за первоначальные размер внутренних элементов. Данное поле может устанавливать только за размер по главной оси.
flex-grow
Flex-grow немного сложнее по сравнению с прошлыми. Данное поле устанавливает относительный размер блоков.
Указав в родительском блоке flex-grow:1 мы указали что каждый внутренний объект равен 1. Так как внутри всего 4 объекта это значит что каждый занимает 1/4 относительно своего родителя (внешнего блока).
После того как во втором блоке указали что flex-grow:2, мы сказали что он будет занимать две части, тем самым разделили внешний блок не на 4 части, а на 5, две из которых занимает второй блок.
Если в родительском блоке указать flex-grow:2, а во внутреннем поставить 1, то данный блок наоборот станет меньше других. Тем самым мы даем сказать что каждый блок занимает 2 части, но после того как мы указали что второй равен 1, оставшаяся единица распределилась между тремя оставшимися блоками
По умолчанию flex-grow всегда равно 0, а это значит что данный блок увеличиваться не будет.
flex-shrink
flex-shrink является совершенной противоположностью flex-grow. Он определяет, на сколько, блок будет уменьшаться. По умолчанию flex-shrink всегда равно 1, это означает что объект будет сжиматься если объект-родитель будет уменьшаться.
Заключение
Если вы хотите узнать еще больше, то это можно увидеть на нашем сайте: ITStalker