Свойства flеx-элементов

Уважаемые читатели, этот пост я написал для себя, как шпаргалку, так что особого смысла здесь не ищите. Ну а если кому-нибудь пригодится, будет неплохо)

Чтобы делать адаптивную верстку, удобно использовать flex-элементы. Они позволяют легко выравнивать разные блоки относительно друг друга, а также выстраивать их в нужном порядке на разных экранах. Основные свойства flex-элементов ниже.

Свойства контейнера

Контейнеру нужно указывать в css свойство display: flex, чтобы он отображался, как flex-элемент. Тогда все другие блоки внутри него также приобретут свойства flex.

Основным свойством для контейнера является выравнивание, которое задается через justify-content. Приобретать оно может такие значения:

  • Flex-start – по умолчанию. Все элементы прижимаются к левой стороне контейнера.
  • Flex-End – все элементы прижимаются к правой стороне контейнера.
  • Center – элементы группируются в центре.
  • Space-between – элементы равномерно распределяются по контейнеру, при этом первый и последний прижимаются к границам контейнера.
  • Space-around – также элементы распределяются равномерно по контейнеру, при этом первый и последний отстоят от границ контейнера на половину промежутка между элементами.
  • Initial – устанавливает значение по умолчанию.
  • Inherit – значение наследуется от родительского элемента (если контейнер сам вложен в другой блок).

Если у контейнера указана высота, указано направление и разрешен перенос элементов на другую строку (имеется параметр flex-flow), то выравнивать контент можно свойством align-content. Параметры у него такие же, как у justify-content.

Свойства justify-content
Свойства justify-content.

Align-items — свойства элементов контейнера

Элементы Flex-контейнера имеют свои свойства, которые задаются в css через align-items. Так задаются их положение по вертикальной оси внутри контейнера:

  • Stretch – это значение по умолчанию. Элементы растягиваются по высоте контейнера.
  • Flex-start – элементы выстраиваются около верхней границы контейнера.
  • Flex-end – элементы выстраиваются внизу контейнера.
  • Center – элементы выстраиваются по центру.
  • Baseline – элементы выстраиваются по базовой линии.
  • Initial – выставляется значение по умолчанию.
  • Inherit – берется значение от родительского элемента.
Свойства align-items
Свойства align-items.

Align-self – выравнивание отдельного элемента

Это свойство позволяет указать выравнивание для одного из элементов, независимо от прочих. Параметры у него такие же, как у align-items, но действует это не на всю строку, а только на отдельный элемент.

Flex-direction — направление главной оси

По умолчанию флекс-элементы располагаются слева направо. Но ось можно направить в любую сторону с помощью свойства flex-direction. Параметры у него такие:

  • Row – по умолчанию элементы располагаются в ряд слева направо.
  • Row-reverse – ряд меняет ориентацию справа налево.
  • Column – элементы выстраиваются в колонку. Главная ось идет сверху вниз.
  • Column-reverse – та же колонка, но ось идет снизу вверх. Элементы также располагаются по порядку снизу вверх.
  • Initial – выставляется значение по умолчанию.
  • Inherit – значение наследуется от родительского элемента.
Свойства flex-direction
Свойства flex-direction.

Flex-wrap – расположение элементов в строке

Этот параметр определяет, как будут расположены элементы в контейнере – в одну строку или в несколько, будут ли они переноситься или нет. Свойства flex-wrap:

  • Nowrap — перенос запрещен. Элементы будут выстраиваться в контейнере в один ряд, слева направо. Если места окажется мало, то содержимое их выйдет за границы.
  • Wrap – элементы будут при необходимости переноситься на новую строку в пределах контейнера. Отсчет идет слева направо.
  • Wrap-reverse – перенос разрешен, но ось перевернута, и элементы располагаются слева направо и снизу вверх, т.е. переноситься они будут вверх.
  • Initial – используется значение по умолчанию.
  • Inherit – наследуется значение родителя.

Flex-flow – краткая запись многострочности и направления.

Этот параметр заменяет собой сразу два других – flex-direction и flex-wrap. Параметры у flex-flow такие же, как и у них, указываются друг за другом. Например:

flex-flow: row wrap;

flex-flow: column nowrap;

Order – порядок элементов

Этот параметр позволяет поменять расположение элементов внутри контейнера, например, передвинуть один из них. По умолчанию все элементы расположены друг за другом так, как они идут в коде страницы. Параметр order у них по умолчанию имеет значение 0, т.е. order: 0.

Если элементу присвоить значение order: -1, то он переместится в начало и станет первым.

Если элементу назначить order: 1, то он переместится в конец и станет последним.

Это свойство можно использовать для определения порядка элементов, назначая им разные значения order. Например, элементы со значениями 3, 5, 4, 6 выстроятся в таком порядке: 3, 4, 5, 6. Чем меньше число в параметре order, тем больше у этого элемента приоритет.

Flex-basis – ширина элемента

Свойство flex-basis позволяет указать базовую ширину элемента. По умолчанию имеет значение auto, то есть ширина элемента зависит от содержимого и соседних элементов. Может задаваться в пикселах или процентах, например:

Flex-basis: 100px

Flex-basis: 20%

Метки

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Close