Flexbox - самый лучший способ сверстать это!

Flexbox - самый лучший способ сверстать это!

Flexbox – это css модуль разработанный специально для создания гибких макетов любой сложности. Раньше для построения таких макетов у каждого веб-мастера имелся свой набор css хаков, сейчас же эти приёмы потихоньку уходят в прошлое.

Наконец свершилась мечта миллионов веб мастеров – теперь позиционировать элемент по вертикали так же просто как и по горизонтали. Ура, товарищи.

Если Вам приходилось работать с такими свойствами блоков как: float, display:inline-block, position:absolute и табличная верстка(хоть и на div), то согласитесь, что это не самая легкая задача. И это не удивительно, ведь эти свойства изначально не были предназначены для создания сложных макетов

Содержание статьи:

Основные термины

  • flex-контейнер – этот элемент создает контекст для flexbox. Flex контейнером может быть блочный или строчный элемент например div, main или даже span.
  • flex-элемент – это непосредственный ребенок flex-контейнера. Таких элементов может быть неограниченное количество. Flex-элементы мы уже можем располагать в любом порядке и задавать им любой размер.
1
2
3
<ul> <!-- flex-контейнер -->
<li></li> <!-- flex-элемент -->
</ul>
  • Основная ось – располагается горизонтально
  • Поперечная ось – располагается перпендикулярно основной оси

Оси в flexbox

Эти оси определяют направления, в котором располагаются flex-элементы внутри своего flex-контейнера

У каждой оси есть начало и конец. По умолчания основная ось идет слава направо а поперечная сверху вниз. Но это легко изменить. Так же очень легко поменять оси местами и как следствие расположение элементов с горизонтального на вертикальное

Самый простой пример

html
1
2
3
4
5
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
stylus
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
ul() {
background: #ccc;
list-style-type: none;
margin: 0;
padding: 0;
}
li() {
display: block;
background: red;
color: #FFF;
margin: 10px;
padding: 10px;
}
ul {
ul();
display: flex;
}
li {
li();
}

Все примеры написаны на препроцессоре stylus. Общие стили в каждом примере вынесены в миксины для красоты и наглядности.


А вот так это выглядит в броузере:

See the Pen display:flex by Alexandr (@login2030) on CodePen.

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

See the Pen display:inline-flex by Alexandr (@login2030) on CodePen.

Как видно из примера, хоть ul и имеет display: block, но все равно встает так, как будто ему задано diaplay:inline-block. Очень важно заменить, что по умолчанию, если в контейнере не будет хватать места для элементов, то последние не будут переноситься на новую строчку. Но опять же это поведение очень легко изменить.

Свойства

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

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

  • flex-direction - контролирует направление оси контейнера. Как мы знаем, по умолчанию основная ось контейнера идет слева направо. Благодаря свойству flex-direction мы это можем изменить.
    Возможные значения:
    • row - выстраивает элементы слева направо. Является значением по умолчанию.
    • row-reverse - выстраивает элементы справа налево: [ пример ]
    • column - изменяет направление основной оси, теперь она идет сверху вниз, а поперечная слева направо, при этом элементы теперь расположены вертикально и занимают всю ширину своего контейнера: [ пример ]
    • column-reverse - изменяет направление основной оси, теперь она идет снизу вверх, а поперечная всё так же слева направо: [ пример ]
  • flex-wrap - включает многострочное отображение элементов внутри контейнера.
    Возможные значения:
    • nowrap - элементы расположены в одну линию слева направо Является значением по умолчанию.
    • wrap - блоки расположены в несколько горизонтальных рядов, в случае если они не помещаются в один ряд слева направо: [ пример ]
    • wrap-reverse - то-же что и wrap, но блоки располагаются в обратном порядке: [ пример ]
      Стоит так же отметить, что это довольно непривычное расположение элементов, так что имейте это ввиду.

      Так же, если у нас стоит flex-direction: column и flex-wrap: wrap, то элементы распределятся автоматически на равные колонки, что тоже неплохо, учитывая их поведение по умолчанию при нехватке места по высоте: [ пример ]

  • justify-content - позволяет изменять расположение, выравнивание и свободное пространство между элементами.
    Возможные значения:
    • flex-start - помещает элементы в начало основной оси. Является значением по умолчанию.
    • flex-end - помещает элементы в конец основной оси: [ пример ]
    • center - элементы находятся по центру поперечной оси: [ пример ]
    • space-between (пространство между) - первый и последний элементы находятся по краям, остальные равномерно заполняют оставшееся свободное место: [ пример ]
    • space-around (пространство вокруг) - расстояние между всеми элементами становится одинаковым, при этом расстояние между правым краем и первым элементом равно половине расстояния между первым и вторым элементом. То же самое и с другой стороны: [ пример ]

      Особое значение для элементов имеет свойство margin, особенно если оно установлено в auto. В таком случае margin оттолкнет элементы по сторонам: [ пример ]. Используя эту особенность, можно добиться очень интересных результатов не мучаясь с float.

  • align-items - позволяет выравнивать элементы по поперечной оси
    Возможные значения:
    • stretch - элементы растягиваются по всей длине поперечной оси (значение по умолчанию): [ пример ]
    • flex-start - элементы прижимкаются к началу поперечной оси: [ пример ]
    • flex-end - элементы прижимаются к концу поперечной оси: [ пример ]
    • center - элементы располагаются в центре поперечной оси (наконец то!): [ пример ]
    • baseline - элементы выравниваются по их baseline: [ пример ]
  • align-content - позволяет выравнивать элементы, если они находятся на нескольких рядах. Оно очень похоже на justify-content, но применяется относительно поперечной оси.
    Возможные значения:
    • stretch - элементы делят поровну высоту контейнера: [ пример ]
    • flex-start - элементы прижимаются к началу flex-контейнера: [ пример ]
    • flex-end - элементы прижимаются к концу flex-контейнера: [ пример ]
    • center - элементы находятся в центре flex-контейнера: [ пример ]
    • space-between - первый ряд элементов располагается в начале flex-контейнера, последний ряд – в конце, все остальные ряды равномерно распределены в оставшемся пространстве: [ пример ]
    • space-around - элементы равномерно распределены внутри flex-контейнера, разделяя все свободное пространство поровну между собой. Причем расстояние от начала контейнера до первого ряда элементов равно половине расстояния от первого ряда до второго, что очень похоже на поведение justify-content:space-around: [ пример ]

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

  • order - позволяет менять порядок следования конкретного элемента. По умолчанию у всех элементов это свойство имеет значение 0. Если мы укажем определенному элементу значение больше нуля, то он переместится в конец, а если меньше нуля, то в начало. Таким образом очень легко определять порядок следования элементов, не прибегая при этом к javascript: [ пример ]
  • flex-grow - позволяет изменять размер конкретного элемента, относительно других элементов. По умолчанию значение 0. Больше нуля - увеличение размера: [ пример ].

    Стоит так же отметить, что если элементы не помещаются в один ряд, то они автоматически перенесутся на новую строку и там уже будут делить все свободное пространство. Посмотреть это можно уменьшив размер вьюпорта в примере выше.

  • flex-shrink - определяет логику уменьшения элементов, если им не хватает места в контейнере. Значение по умолчанию - 1. Если элементу задано значение больше единицы, то он начинает уменьшаться раньше остальных: [ пример ].
  • flex-basis - базовый размер элемента. Значение по умолчанию auto, в этом случае размер элемента определяется размером его контента. В другом случае размер может быть задан в любых единицах измерения: [ пример ].

    Как только элементам не хватает места, они начинают перетекать на новую строчку автоматически.

  • flex - является краткой формой записи flex-grow, flex-shrink, flex-basis.
    • flex: 1 - это краткая запись для flex-grow: 1.
    • flex: 1 1 - это краткая запись для flex-grow: 1 и flex-shrink: 1.
    • flex: 1 1 200px - это краткая запись для flex-grow: 1, flex-shrink: 1 и flex-basis: 200px.
  • align-self - позволяет выравнивать конкретный элемент вдоль поперечной оси: [ пример для всех вариантов ].
    Возможные значения:
    • stretch - элемент растягивается на всю длину поперечной оси. Является значением по умолчанию.
    • flex-start - элемент прижимается к началу поперечной оси
    • flex-end - элемент прижимается к концу поперечной оси
    • center - элемент располагаются в центре поперечной оси
    • baseline - элемент выравнен по baseline

Выравнивание контента внутри контейнера. Три способа.

При помощи flexbox мы можем без труда выравнивать элементы без всяких хитростей и магических хаков. Давайте посмотрим, как можно расположить контент внутри блока-родителя:

Способ первый

Укажем flex-контейнеру:

css
1
2
3
4
5
6
ul {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

See the Pen text-center-container-1 by Alexandr (@login2030) on CodePen.

Способ второй

css
1
2
3
4
5
6
7
8
ul {
display: flex;
flex-direction: row;
justify-content: center;
}
li {
align-self: center;
}

See the Pen text-center-container-2 by Alexandr (@login2030) on CodePen.

Способ третий

css
1
2
3
4
5
6
7
ul {
display: flex;
flex-direction: row;
}
li {
margin: auto;
}

See the Pen text-center-container-3 by Alexandr (@login2030) on CodePen.

Заключение

Flexbox очень хорошо поддерживается броузерами (97.32%). Но все же рекомендуется использовать “вендорные префиксы”.

cau.jpg

Видео