user

Авторизация

Добро пожаловать!

Регистрация

Graf

Кодинг

Работа с Flexbox CSS: полное руководство с примерами

 В данной статье будут показаны все возможность нативного метода Flexbox. Данный метод верстки сайта за счет своей простоты становится все более популярным среди разработчиков. В этой статье я постараюсь в кротчайших деталях разобрать все тонкости метода Flexbox.

 Как было сказано ранее Flexbox популярен тем что с его помощью можно с легкостью решить задачи которые требуют много усилий и времени. Например расставить элементы в ряд по вертикали, или разместить по середине родителя, или прижать к низу экрана, или может сделать все объекты одного размера. Все это можно сделать с помощью Flexbox. Меньше воды больше дела, начнем-же разбор нашей прелести)

Подключение Flexbox

 На сегодняшний день Flexbox поддерживают все популярные браузеры. Так-что проблем с подключение возникнуть не должно.

version

 Допустим внутри блока-родителя div находятся еще несколько объектов которые нужно разместить по горизонтали. Для этого в подключенном css файле нужно прописать следующую команду.

 У любого объекта главной осью всегда является ось Y и поэтому все объекты расположены по вертикали. Подключая свойство flex наша ось поворачивается на 90 градусов, тем самым ось Y расположена горизонтально, а X вертикально.

flexbox

flex-direction

 Cразу после подключение flexbox, главная ось выстраивается вертикально. Связано это с тем что строка flex-direction имеющая два основных свойства (row — вертикально, column — горизонтально) автоматически принимает свойство row.

flexbox

 Также у данного поля есть еще два свойства ( row-reverse и column-reverse) которые очень похожи на предыдущие.

flexbox

justify-content

 Данное поле отвечает за выравнивание элементов относительно главной оси. Justify-content всего имеет 5 свойств:

  • center
  • flex-start
  • flex-end
  • space-around
  • space-between
flexbox

align-items

 Поле align-items похож на justify-content только по сравнению с ней он работает не с главной осью, а с перпендикулярной ей.

flexbox

align-self

 Также, часто бывает так что каждый элемент нужно выравнивать по отдельности. В таких случаях может помочь align-self.

flexbox

 Как и align-items, данное поле имеет такие-же свойства:

  • flex-start
  • flex-end
  • center
  • stretch
  • baseline

flex-basis

 Flex-basis отвечает за первоначальные размер внутренних элементов. Данное поле может устанавливать только за размер по главной оси.

flexbox

flex-grow

 Flex-grow немного сложнее по сравнению с прошлыми. Данное поле устанавливает относительный размер блоков.

flexbox

 Указав в родительском блоке flex-grow:1 мы указали что каждый внутренний объект равен 1. Так как внутри всего 4 объекта это значит что каждый занимает 1/4 относительно своего родителя (внешнего блока).

 После того как во втором блоке указали что flex-grow:2, мы сказали что он будет занимать две части, тем самым разделили внешний блок не на 4 части, а на 5, две из которых занимает второй блок.

 Если в родительском блоке указать flex-grow:2, а во внутреннем поставить 1, то данный блок наоборот станет меньше других. Тем самым мы даем сказать что каждый блок занимает 2 части, но после того как мы указали что второй равен 1, оставшаяся единица распределилась между тремя оставшимися блоками

flexbox

По умолчанию flex-grow всегда равно 0, а это значит что данный блок увеличиваться не будет.

flex-shrink

 flex-shrink является совершенной противоположностью flex-grow. Он определяет, на сколько, блок будет уменьшаться. По умолчанию flex-shrink всегда равно 1, это означает что объект будет сжиматься если объект-родитель будет уменьшаться.

 В ближайшее время появятся подробные примеры использования Flexbox!