Основной принцип Flexbox заключается в том, чтобы сделать нашу верстку более гибкой и адаптивной. Благодаря нему контейнеры автоматически распределяют дочерние элементы внутри родителя, учитывая их размеры и отступы между ними.
В этой статье мы рассмотрим 5 наиболее распространенных свойств Flexbox. Будем рассматривать как они работают, и как вы можете использовать их на практике.
Свойство #1: Display: Flex
У нас есть четыре цветных div различных размеров, помещенных в серый контейнер div. На данный момент для каждого div по умолчанию установлено значение display: block. Таким образом, каждый квадрат занимает всю ширину своей линии.
Чтобы начать работу с Flexbox, вам нужно превратить свой контейнер в flex контейнер. Поменяем свойство display: block на display: flex:
#container {display: flex;}Code language: CSS (css)
Отлично! Как мы видим на анимации наши блоки выстроились в ряд, значит flexbox работает. Теперь можем приступить к позиционированию элементов внутри нашего контейнера
Свойство #2: Flex Direction
Контейнер Flexbox имеет две оси: основную ось и поперечную ось, которые по умолчанию выглядят следующим образом:
По умолчанию все блоки расположены вдоль главной оси слева направо. Вот почему ваши квадраты по умолчанию превратились в горизонтальную линию, как только вы использовали свойство display: flex. Свойства flex-direction, позволяет изменять направление главной оси.
#container {display: flex; flex-direction: column;}Code language: CSS (css)
Важно: flex-direction: column; не ось направления элементов. Вместо этого он изменяет направление главной оси с горизонтального на вертикальное.
Существует также несколько других вариантов flex-direction: row-reverse и column-reverse.
Свойство #3: Justify Content
Свойство justify-content — задает выравниванием элементов относительно главной оси.
#container { display: flex; flex-direction: row; justify-content: flex-start;}Code language: CSS (css)Оно может принимать ряд значений:
- Flex-start
- Flex-end
- Center
- Space-between
- Space-around
Если с flex-start, flex-end, center все интуитивно понятно, то с space-between, space-around немножко сложнее, давайте разбираться.
Space-around — задает равные отступы с обеих сторон внутри родительского контейнера, так же добавляет равные отступы между самими элементами. Расстояние между элементами в двое больше чем отступы у родительского контейнера. Например, если мы зададим отступы между элементами 20px, то внутренние отсnуfы контейнера будут равны 10px.
Space-between — задает только равные отступы между элементами. По сути он прижимает первый и крайний элементы к стенкам контейнера и распределяет внутри него оставшиеся элементы с равными расстояниями между ними.
Свойство #4: Align-items
Если мы использовали Justify-content для выравнивания элементов относительно главной оси, то align-items выравнивает элементы относительно поперечной оси. Оси Cross.
Align-items может принимать ряд значений:
- flex-start
- flex-end
- center
- stretch
- baseline
Первые три точно такие же, как justify-content, так что здесь нет ничего особенного. Следующие два ведут себя немного иначе.
При использовании stretch блоки растягиваются и занимают всё доступное место по поперечной оси, важно отметить, что при этом учитываются min-width и max-width элементов.
При использовании baseline все элементы будут выровнены по своей базовой линии.
Свойство #5: Align-self
Align-self — управляет выравнивание модного конкретного элемента.
По сути, он переопределение выравнивание для одного элемента.
#container { align-items: flex-start; }<br>.square { align-self: center; }Code language: CSS (css)В данном примере только элементы с классом .square будут менять выравнивание внутри контейнера. Давайте посмотрим на анимацию.
Подведем итоги
Flexbox отличный инструмент, чтобы уйти от старых решений. Если раньше нужно было элементы выстроить в одну строку, то мы использовать float:left; далее создавали дополнительный элемент в конце строки и задавали ему clear:both; Теперь достаточно использовать display: flex;
На этом все!