Полная шпаргалка Flexbox CSS с примерами

Решил разобраться раз и навсегда что такое Flexbox? Сейчас расскажу и покажу. Но сперва теория, но будет и практика.

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

Лично для меня раньше самым непростым заданием казалось прижать footer ко дну. Если страница огромная, то переживать на этот счет не было смысла, но так как все это от страницы к странице, потому важно изначально сделать все правильно.

Кроме того, Flexbox CSS очень круто работает с адаптивной версткой. Скажу даже так, оно настолько упрощает адаптивную верстку, что правки по адаптации в мобильных устройствах будут минимальными в сравнении с блочной версткой причем кода будет минимум.

Все из-за того, что все эти свойства могут дать максимум контроля и гибкости элементам. Буквально два три свойства, могут проделать достаточно крутой перечень работы, который раньше, делался достаточно сложными методами. А если в сочетании с Flexbox использовать Grid Layout, то результаты поражают!

Помимо всего не лишним будет научиться пользоваться с Emmet который максимально ускоряет написание как html так и css. Это моя рекомендация становления тебя как крутого верстальщика.

Начало работы с Flexbox CSS

Для начала, нужно знать две вещи: Flexbox CSS состоит из двух частей, а именно Контейнер и элементы. Потому и css свойства тоже делятся на две части, для контейнеров и для элементов.

Понятие контейнер и элементы

Преимущества Flexbox в том, что ты можешь разворачивать либо менять целый массив элементов при этом не трогая порядок элементов в DOM дереве (HTML Документе). Раньше я по крайней мере добивался такого лишь с JavaScript.

Если ты хочешь начать работу с Flexbox достаточно лишь установить свойство display со значением flex или inline-flex.

<style>
             .flex{ display: flex; } 
 </style> 
 <div class="flex"> 
             <div class="item">1</div> 
             <div class="item">2</div> 
 </div> 

После применения создаются две оси, внутри контейнера: Главная и поперечная.

Контейнеры и элементы

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

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

Магия Flexbox в том, что мы можем задавать направление как с начала контейнера, так и с его конца.

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

Пример контейнеров и элементов

Как я уже писал, на практических примерах можно увидеть более наглядно, как это работает, что мы и сделаем.

Flexbox CSS свойства для контейнеров

display:

С помощью этого свойства мы всегда задаем свойство блоку или контейнеру. Назначив свойству display значение flex, мы объявляем браузеру что будет работать с этой моделью стилей. Модель подразумевает применение flex свойств только для первых потомков внутри контейнера, то есть их дети будут иметь стандартное значение, например, если это div, то стандартное значение будет block.

Как уже было сказано выше, flex значение можно задать двумя способами:

  • flex – растягивает родителя на всю свободную ширину, как бы мы задали блоку 100%-ю ширину. Так же в начале и конце применяются переносы, что делает контейнер абсолютно отделенным блоком.
  • inline-flex – с внешней части обтекается другими элементами, но внутренние блоки работают аналогично предыдущему значению.

Собственно, их разница только в том, как они взаимодействуют с окружающими элементами, что иногда играет очень важную роль.

Задаются они следующим образом:

display:block
display:inline-block

flex-direction:

Задает направление главной и поперечной оси, в зависимости от выбранного значения.

  • row – слева-направо (стандартное значение) (?)
  • column – сверху-вниз (?)
  • row-reverse – справа-налево (?)
  • column-reverse — снизу-вверх (?)

flex-wrap:

Этот элемент задает перенос элементов, которые не помещаются в контейнере.

  • nowrap – установлен по умолчанию. С ним все вложенные элементы изначально стоят в один ряд. Если из-за их размеров и количества они не помещаются в контейнере, то никаких переносов осуществляться не будет.
  • wrap – Включает перенос на следующий ряд, в том случае, если они не помещаются в контейнер.
  • wrap-reverse – Делает тоже самое, что и предыдущее свойство wrap, только переворачивается весь массив DOM документа (внешне, но html остается таким каким был до этого).

flex-flow: direction wrap

Совмещает два предыдущих свойства, а также позволяет устанавливать два значения. Это значительно сокращает css код.

Таким образом мы вмещаем в одно css свойство flex-wrap и flex-direction.

/* только flex-wrap */
 flex-flow: nowrap; 
 flex-flow: wrap; 
 flex-flow: wrap-reverse; 

 /* только flex-direction */ 
 flex-flow: row; 
 flex-flow: row-reverse; 
 flex-flow: column; 
 flex-flow: column-reverse; 

 /* сразу оба значения: flex-direction и flex-wrap */ 
 flex-flow: row nowrap; 
 flex-flow: column wrap; 
 flex-flow: column-reverse wrap-reverse; 

Очень крутой элемент на самом деле.

justify-content:

Свойство выравнивает все элементы по основной оси:

  • flex-start – направление элементов совершается с начала в конец, если контейнер рассчитан на 16 элементов, а мы имеем 15, то место на него остается пустым. (Значение установлено по умолчанию)
  • flex-end – Аналогично предыдущему, только направление элементов будет задаваться, начиная с конца. Точно так же в начале может остаться свободное место.
  • center – выставляет все элементы по центру – соответственно с лева и права может остаться свободное место.
  • space-between – прижимает все элементы к краям контейнера, а свободное место между элементами, которые находятся посредине распределяется равномерно.
  • space-around – все свободное место распределяется между элементами равномерно, коме крайних элементов. Свободное место к краям в два раза меньше, чем свободное место между центральными элементами.
  • space-evenly – Свободное место между элементами распределяется равномерно, даже для крайних элементов.

align-content:

Это замечательное свойство выравнивает ряды, проходящие по поперечной оси. Таким образом очень удобно прижать определенные блоки к низу или верху линии либо центрировать все блоки относительно их размеров (детальнее в примере):

  • stretch – используется по умолчанию, ряды растягиваются полностью, заполняя строку, нужная тема при создании карточек товаров.
  • flex-start – прижимаем ряды к верхней части внутри контейнера, причем размеры элементов могут отличаться и оставлять в строке за собой пустое место.
  • flex-end – аналогично предыдущему, только наоборот, прижимаем в нижней части контейнера. Соответственно размеры блоков могут отличаться.
  • center – группируем элементы по центру контейнера, чем оставляем место по краям.
  • space-between – прижимаем ряды к краям, а место между ними распределяем равномерно.
  • space-around – равномерно распределяем свободное пространство между рядами, но при этом не прижимаем к краям сами элементы. Интересный момент, что пространство между элементом и краем контейнера будет равно в два раза меньше чем пространство между элементами, находящимися посередине.
  • space-evenly – значение очень похоже на значение space-around, но разница заключается в расстоянии у крайних элементов до краев контейнера. Оно абсолютно равно тому расстоянию, которое имеют средние элементы между собой.

 Пример находится в немного ниже.

align-items:

Очень похож на align-content, только если в упомянутом мы работам по поперечной оси, то в align-content мы работаем по главной оси.

  • stretch – свойство растягивает ряды полностью, чем заполняет строку полностью, Таким образом все элементы кажутся одинаковыми по высоте. Наибольший элемент в ряде, задает высоту всем остальным (По умолчанию)
  • flex-start – все элементы принимают свой родной размер, но при этом прижимаются к верху, из-за чего внизу блока может остаться место.
  • flex-end – все элементы принимают свой родной размер, но при этом элементы прижимаются к низу. Вверху остается пустое место.
  • center – все элементы выравниваются по центру, вверху и внизу остается свободное место.
  • baseline — все элементы выравниваются по базовой линии текста

Свойства Flexbox для элементов контейнера

flex-grow:

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

Если мы решим сменить 0 на 1 для всех элементов, то они равномерно растянутся по всей главной оси заполнив все свободное место и приняв при этом одинаковые размеры по ширине.

А вот если вдруг мы хотим сделать один блок больше чем другие, то можно назначить на все блоки 1, а на необходимый 2, собственно, чтобы было понятнее, я попытался это наглядно показать в примере:

flex-shrink:

Это свойство совсем противоположное свойству flex-grow. Если в предыдущем мы заставляли блок увеличиться и занять свободное место, то в случае с flex-shrink мы уменьшаем блоки если задаем большое значение.

По умолчанию flex-shrink: 1;

Вместе если вместе с свойством flex-shrink нужно использовать flex-basis, который задает базовый размер элемента. Если ты его не укажешь, то работать твое свойство flex-shrink не будет.

Теоретический пример: если у нас будет контейнер размерностью 800 пикселов, а элементы будут иметь flex-basis: 200px, а flex-shrink будет иметь стандартное число 1, то каждый блок будет иметь свои базовые 200px, если же уменьшить контейнер до 600px, то элементы естественно тоже уменьшатся и будут равны по 150px. Если одному из элементов назначить значение flex-shrink: 0, этот элемент получит свой базовый размер 200px, а остальные уже равномерно распределят между собой свободное место.

Правда не стоит удивляться если размеры блоков как-то могут не сходиться с заданным тобой базовым размером, так как нужно учитывать padding (если стоит 15 на левый и правый бок, то элемент будет иметь размер 230) и margin значения.

Переходим к практике:

Я описал это свойство максимально так как изначально мне оно показалось сложным для понимания – надеюсь я один такой, но все же лучше дать максимум информации для понимания.

flex-basis:

Это свойство задает базовый размер элементу создавая большие приоритет свойству width. Естественно работает это свойство только в сочетании с flexbox. Это свойство умеет работать с разными значениями типа px, em, rem, %, vw, vh, чего вполне будет достаточно.

Немного выше я достаточно неплохо навел теоретический пример работы flex-basis, если интересно, просто поднимись к пункту flex-shrink и почитай.

А теперь практический пример:

flex: {grow shrink basis}

Как и у контейнеров есть свое свойство, нацеленное на сокращение записи, так и у элементов есть свое свойство flex.

Записывать это свойство нужно следующим образом: flex: flex-grow flex-shrink flex-basis

По умолчанию свойство выглядит так: flex: 0 1 auto;

Обрати внимание, что записывать все три значения не обязательно

/* 0 0 auto */
 flex: none; 

 /* Одно значение, число без единиц измерений: flex-grow */ 
 flex: 2; 

 /* Одно значение, ширина/высота: flex-basis */ 
 flex: 20em; 
 flex: 300px;
 flex: content; 
 flex: auto; 

 /* Два значения: flex-grow | flex-basis */ 
 flex: 1 300px; 

 /* Два значения: flex-grow | flex-shrink */ 
 flex: 0 1; 

 /* Три значения: flex-grow | flex-shrink | flex-basis */ 
 flex: 1 2 33.3%; 

Кому не понятно, как управлять полностью этим свойством, напишите комментарий об этом, я в таком случае сделаю теоретическое дополнение. Ну и конечно же практический пример.

align-self:

Данное свойство работает аналогично свойству align-items, разница лишь том, что значение можно добавить индивидуально определенному элементу.

Свойство align-self имеет точно такие-же значения, как и свойство align-items:

  • stretch – свойство растягивает элемент полностью заполнив всю строку
  • flex-start – элемент прижимается к началу строки, из-за чего внизу блока может остаться место
  • flex-end – элемент прижимается к концу строки, из-за чего в строке может остаться свободное место
  • center – элемент выравнивается по центру, вверху и внизу остается свободное место
  • baseline – элемент выравнивается по базовой линии текста

Наглядный пример:

order:

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

По умолчанию: order: 0

Потому, если вдруг ты кажешь одному элементу order: 1, а все остальные как мы знаем будут иметь значение order: 0, то с начало отображаться нулевые элементы и только потом элемент со значением 1.

Заключительная часть по Flexbox

Заключение, это не конец!

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

Все эти примеры можно найти, переходя по ссылкам либо в рубрике Grid layout и Flexbox.

Я кстати рекомендую изучить в дополнение к Flexbox еще и Grid верстку, потому я создал шпаргалку в похожем стиле по гридам.

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

Раз в неделю мы отправляем дайджест с самыми популярными статьями.

6 комментариев к “Полная шпаргалка Flexbox CSS с примерами”

  1. Единственное место, где я нашел описание нескольких значений в одну строку для flex-basis.
    Спасибо!

    Ответить
  2. Дорогой друг. а как сделать так, чтобы блоки разных размеров выстраивались на странице в минимальными отступами как по вертикали, так и по горизонтали?

    Ответить
    • В принципе можно на этот счет смотреть такие вещи как: flex-shrink и flex-basis, так же гляньте пример в разделе align-items, там проставьте значение на align-content: flex-start и align-items: center.
      Если это не то, то можете связаться со мной по емейлу [email protected], кинуть пример и я по возможности скину вам готовый вариант.

      Ответить

Оставьте комментарий