Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>22 мар 2023</li>

3 <li>0</li>

4 </ul>Всё об одном из самых востребованных инструментов современной вёрстки.

5 Иллюстрация: Оля Ежак для Skillbox Media

6 Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.

7 Flexbox - это один из основных инструментов для создания адаптивных веб-страниц (наравне с <a>CSS Grid</a>), поэтому вот уже более 10 лет он остаётся мастхэв-технологией для верстальщиков и фронтенд-разработчиков.

8 В этой статье мы расскажем о концепциях Flexbox, свойствах flex-контейнеров и flex-элементов и покажем их действие на простых примерах. А также поделимся лайфхаками для работы с Flexbox в Google Chrome и ссылками на бесплатные тренажёры.

9 <ul><li><a>Что такое Flexbox</a></li>

10 <li><a>Как превратить элемент во flex-контейнер</a></li>

11 <li><a>Свойства Flexbox:</a></li>

12 </ul><ul><li><a>flex-direction</a></li>

13 <li><a>flex-wrap</a></li>

14 <li><a>flex-flow</a></li>

15 <li><a>justify-content</a></li>

16 <li><a>align-items</a></li>

17 <li><a>align-content</a></li>

18 <li><a>gap</a></li>

19 </ul><ul><li><a>Свойства flex-элементов:</a></li>

20 </ul><ul><li><a>order</a></li>

21 <li><a>flex-grow</a></li>

22 <li><a>flex-shrink</a></li>

23 <li><a>flex-basis</a></li>

24 <li><a>align-self</a></li>

25 </ul><ul><li><a>Как работать с Flexbox в Google Chrome</a></li>

26 <li><a>Где поупражняться с Flexbox</a></li>

27 </ul>Flexbox(от англ. flex - гибкий) - это модуль CSS, который позволяет удобно управлять расположением, порядком, размерами и отступами между элементами веб-страницы. Сайты, свёрстанные "флексами", получаются адаптивными, то есть выглядят хорошо на разных устройствах: ПК, ноутбуках, планшетах и смартфонах.

28 До появления Flexbox разработчики верстали веб-страницы с помощью таблиц, CSS-свойств position, float и прочих инструментов, которые на самом деле для этого не предназначены. Например, float определяет, с какой сторонытекст, а не группа блоков, будет обтекать элемент. Но так как до начала 2010-х других средств не было, разработчикам приходилось прибегать к подобным "костылям".

29 К счастью, в 2009 году инициативные разработчики решили навсегда избавиться от вёрстки таблицами и позиционирования и создали Flexbox. Сегодня он, как и <a>CSS Grid</a>, является частью стандарта CSS3 и его не нужно подключать отдельно.

30 Перед тем как приступить к вёрстке флексами, стоит познакомиться с составляющими Flexbox и их назначением. Это позволит осмысленно и эффективно использовать возможности инструмента.

31 Во Flexbox есть два вида свойств: одни применяются к flex-контейнеру, другие - к элементам, которые в нём расположены.

32 Flex-контейнер - это "коробка", в которой хранятся flex-элементы (flex item). Чтобы превратить элемент во flex-контейнер, нужно установить ему свойство display: flex или display: inline-flex.

33 Разница между flex и inline-flex в том, что в первом случае контейнер будет занимать всю ширину экрана (как блочный элемент), а во втором - лишь пространство, занимаемое его содержимым.

34 Flex-элементы (flex items) - это дочерние элементы flex-контейнера. Мы можем управлять их расположением, размерами и расстоянием между ними.

35 Изображение: Skillbox MediaГлавная ось (main axis) - направление, в котором располагаются flex-элементы.

36 Поперечная ось (cross axis)- ось, перпендикулярная главной оси.

37 Обратите внимание:направление главной и поперечной осей можно изменить с помощью свойства flex-direction (см. ниже).

38 Главный размер (main size) - размер, соответствующий направлению главной оси.

39 Начало главной оси (main start)- точка, в которой начинается последовательность flex-элементов, расположенных по главной оси.

40 Конец главной оси (main end)- точка, в которой заканчивается последовательность flex-элементов, расположенных по главной оси.

41 Поперечный размер (cross size)- размер, соответствующий поперечной оси.

42 Теперь посмотрим, как ведут себя элементы, когда становятся гибкими. В примере ниже контейнер с классом container содержит три пронумерованных блока div.

43 HTML:

44 <div class="container"> <div class="inner-div"> 1 </div> <div class="inner-div"> 2 </div> <div class="inner-div"> 3 </div> </div>CSS:

45 p { padding-top: 40px; margin: 0; font-size: 100px; font-family: sans-serif; text-align: center; vertical-align: middle; } .inner-div { height: 200px; width: 400px; margin: 10px; background-color: #096eeb; }Так как блочные элементы занимают всю ширину, то блоки .inner-div располагаются один под другим:

46 Изображение: Skillbox MediaА теперь назначим родительскому элементу свойство display: flex:

47 .container { display: flex; }Вот как изменится расположение внутренних блоков:

48 Изображение: Skillbox MediaМагия! Блоки выстроились вдоль главной оси, а их ширина уменьшилась так, чтобы все уместились в одном ряду.

49 Теперь, когда мы умеем превращать обычные блоки во flex-контейнеры, можно изучить каждое свойство Flexbox.

50 flex-direction определяет направление основной и поперечной осей в контейнере. Оно может принимать четыре значения:

51 <ul><li>row(по умолчанию) - элементы располагаются в строку, слева направо;</li>

52 <li>row-reverse - элементы располагаются в строку, справа налево;</li>

53 <li>column - элементы располагаются в столбец, сверху вниз;</li>

54 <li>column-reverse- элементы располагаются в столбец, снизу вверх.</li>

55 </ul>.container { display: flex; flex-direction: row; /*flex-direction: row-reverse; */ /*flex-direction: column; */ /*flex-direction: column-reverse; */ }На слайдере ниже показано, как действует на расположение элементов каждое значение flex-direction:

56 Изображение: Skillbox MediaИзображение: Skillbox MediaИзображение: Skillbox MediaИзображение: Skillbox Mediaflex-wrap определяет, будут ли flex-элементы переноситься на другую строку, если им не хватит места в ряду.

57 Свойство может принимать одно из трёх значений:

58 <ul><li>nowrap(по умолчанию) - элементы не переносятся на новую строку, а сжимаются;</li>

59 <li>wrap - элементы переносятся на новую строку;</li>

60 <li>wrap-reverse - элементы переносятся на новую строку в обратном порядке.</li>

61 </ul>Продемонстрируем действие свойства flex-wrap, для наглядности увеличив количество элементов до восьми:

62 .container { display: flex; flex-wrap: nowrap; /*flex-wrap: wrap; */ /* flex-wrap: wrap-reverse; */ }Изображение: Skillbox MediaИзображение: Skillbox MediaИзображение: Skillbox Mediaflex-flowобъединяет в одно свойство flex-direction и flex-wrap, позволяя задать их значения в одной строке:

63 .container { display: flex; flex-flow: row wrap; }Обратите внимание:при использовании flex-flow важно соблюдать правильный порядок: сначала задать значение для flex-direction, потом для flex-wrap, иначе свойство работать не будет.

64 justify-contentопределяет, как будут распределены элементы вдольглавной оси.

65 Свойство насчитывает 10 значений, но стабильно во всех браузерах работают следующие:

66 <ul><li>flex-start(по умолчанию): выравнивает элементы по началу главной оси;</li>

67 <li>flex-end:выравнивает элементы по концу главной оси;</li>

68 <li>center:центрирует элементы вдоль главной оси;</li>

69 <li>space-between:распределяет элементы по ширине, с одинаковым пространством между ними. Не добавляет отступы между крайними дочерними элементами и границей родителя;</li>

70 <li>space-around:добавляет пространствовокруг каждого элемента;</li>

71 <li>space-evenly:добавляет пространство не только между элементами, но и между ними и границей контейнера (см. иллюстрации ниже).</li>

72 </ul>.container { display: flex; justify-content: flex-start; /* justify-content: flex-end; */ /* justify-content: center; */ /* justify-content: space-between; */ /* justify-content: space-around; */ /* justify-content: space-evenly; */ }Изображение: Skillbox MediaИзображение: Skillbox MediaИзображение: Skillbox MediaИзображение: Skillbox MediaИзображение: Skillbox MediaИзображение: Skillbox Mediaalign-itemsвыравнивает содержимое контейнера вдоль по поперечной оси.

73 У свойства есть пять возможных значений:

74 <ul><li>flex-start:элементы выравниваются по верхнему краю контейнера;</li>

75 <li>flex-end:элементы выравниваются по нижнему краю контейнера;</li>

76 <li>center:содержимое контейнера выравнивается по центру;</li>

77 <li>baseline:элементы выравниваются по базовой линии текста, который в них содержится;</li>

78 <li>stretch:внутренние элементы растягиваются на всю высоту flex-контейнера.</li>

79 </ul>.container { display: flex; align-items: stretch; /*align-items: flex-start;*/ /*align-items: flex-end;*/ /*align-items: center;*/ /*align-items: baseline;*/ }Изображение: Skillbox MediaИзображение: Skillbox MediaИзображение: Skillbox MediaИзображение: Skillbox MediaИзображение: Skillbox Mediaalign-contentдействует подобно justify-content - только распределяет элементы относительно поперечной оси и работает с многострочными контейнерами.

80 Сделаем наш контейнер многострочным: установим фиксированную высоту и включим flex-wrap: wrap.

81 .container { height: 600px; flex-wrap: wrap; display: flex; align-content: flex-start; /* align-content: flex-end; */ /* align-content: center; */ /* align-content: space-between; */ /* align-content: space-around; */ /* align-content: stretch; */ }На слайдах ниже показано, как ведут себя ряды при установке разных значений align-content:

82 Изображение: Skillbox MediaИзображение: Skillbox MediaИзображение: Skillbox MediaИзображение: Skillbox MediaИзображение: Skillbox MediaИзображение: Skillbox Mediagap - это разрыв между отдельными элементами, строками или колонками внутри flex-контейнера. Значение по умолчанию - none; задаётся пикселями (px) или процентами.

83 Обратите внимание:разрывы устанавливаются только между элементами, а не между элементами и границами родителя.

84 Существует три версии свойства:

85 <ul><li>row-gap- устанавливает разрыв между строками;</li>

86 <li>column-gap- устанавливает разрыв между колонками;</li>

87 <li>gap - устанавливает разрыв между строками и колонками. При этом, если задать только значение, оно применяется и к строкам, и к колонкам.</li>

88 </ul>container { display: flex; gap: 50px; /*row-gap: 50px;*/ /*column-gap: 50px;*/ /*gap: 50px 100px;*/ }Вот как будут располагаться блоки при разных значениях и версиях gap:

89 Изображение: Skillbox MediaИзображение: Skillbox MediaИзображение: Skillbox MediaИзображение: Skillbox MediaИзображение: Skillbox MediaСвойства, с которыми мы познакомились в предыдущем разделе, устанавливаются в стилях контейнера и действуют на всё его содержимое. Но во Flexbox также можно управлять отдельными flex-элементами.

90 orderустанавливает порядок расположения элементов во flex-контейнере относительно друг друга.

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

92 HTML:

93 <div class="container container_view"> <div class="inner-div item-1"> 1 </div> <div class="inner-div item-2"> 2 </div> <div class="inner-div item-3"> 3 </div> </div>CSS:

94 .container { display: flex; } .item-1 { order: 2; } .item-2 { order: 1; } .item-3 { order: 3; }Изображение: Skillbox MediaИзображение: Skillbox MediaИзображение: Skillbox Mediaflex-growпозволяет указать, какую долю свободного пространства во flex-контейнере может занимать элемент, или, другими словами, в какой степени он может "расти" вдоль главной оси. В качестве значения можно задать любое неотрицательное число, по умолчанию это 0.

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

96 CSS:

97 .container { display: flex; } .item-1 { flex-grow: 0; } .item-2 { flex-grow: 0; } .item-3 { flex-grow: 0; }Вот как это будет выглядеть:

98 Изображение: Skillbox MediaИзображение: Skillbox MediaИзображение: Skillbox MediaИзображение: Skillbox Mediaflex-shrink, в противоположность flex-grow, позволяет указать, насколько сильно элемент должен сжиматься, если суммарная ширина элементов превышает размер контейнера. Значение может быть любым положительным числом.

99 По умолчанию у всех дочерних элементов устанавливается значение этого свойства 1. Элементы с ненулевым значением flex-shrink будут сжиматься, насколько это возможно, с учётом значений flex-shrink других элементов.

100 CSS:

101 .container { display: flex; } .item-1 { flex-shrink: 1; /*flex-shrink: 2;*/ /*flex-shrink: 3;*/ } .item-2 { flex-shrink: 2; /*flex-shrink: 2;*/ } .item-3 { flex-shrink: 1; }Вот как это будет выглядеть в браузере:

102 Изображение: Skillbox MediaИзображение: Skillbox MediaИзображение: Skillbox Mediaflex-basisзадаёт размер элемента по главной оси, перед тем как будет распределено оставшееся пространство.

103 Параметр можно задать в пикселях, в процентах или с помощью ключевых слов:

104 <ul><li>auto(по умолчанию) - в зависимости от значения flex-direction примет значение свойства width или height. Если же соответствующее свойство тоже установлено в auto, то элемент примет размер содержимого;</li>

105 <li>max-content- устанавливает предпочтительную ширину;</li>

106 <li>min-content - устанавливает минимальную ширину;</li>

107 <li>fit-content - устанавливает максимально возможный размер элемента, ограниченный значениями max-content и min-content.</li>

108 </ul>Обратите внимание:flex-basis действует подобно свойству width, только имеет более высокий приоритет. Поэтому если для элемента будут заданы значения обоих свойств, то width будет игнорироваться.

109 align-selfустанавливает выравнивание отдельного flex-элемента вдоль поперечной оси, переопределяя значение свойства align-items.

110 Значения align-self задаются для каждого flex-элемента и могут быть следующими:

111 <ul><li>flex-start - выравнивает элемент по началу поперечной оси (cross start);</li>

112 <li>flex-end - выравнивает элемент по концу поперечной оси (cross end);</li>

113 <li>center - выравнивает элемент по центру поперечной оси;</li>

114 <li>stretch(по умолчанию для flex-элементов) - элементы растягиваются на всю высоту контейнера.</li>

115 </ul>На слайдах ниже показано, как ведут себя flex-элементы при разных значениях align-self:

116 Изображение: Skillbox MediaИзображение: Skillbox MediaИзображение: Skillbox MediaМы познакомились с самыми важными свойствами Flexbox - их хватит, чтобы верстать полноценные веб-страницы и разбираться в чужом HTML- и CSS-коде. Больше технических деталей и дополнительную информацию о технологии можно найти в <a>документации на портале W3C</a>.

117 В Google Chrome есть фича, которая позволяет экспериментировать со свойствами Flexbox и отлаживать код, не выходя из браузера.

118 Откройте веб-страницу и зайдите в Chrome DevTools (клавишаF12). Во вкладкеElementsрядом с flex-контейнером вы увидите значокflex. Если на него нажать, то вокруг каждого блока появится пунктирная граница, а разрывы (gap) будут заштрихованы.

119 Скриншот: Chrome DevTools / Skillbox MediaЦвет границ и штриховки можно изменить во вкладкеLayout, в разделеFlexbox:

120 Скриншот: Chrome DevTools / Skillbox MediaТеперь посмотрите на стили контейнера во вкладкеStyles. Рядом с селектором, в котором задано свойство display: flex, расположен значокflexbox editor. Кликните на него, чтобы открыть панель редактора: в ней можно устанавливать значения свойств flex-direction, flex-wrap, align-content, justify-content и align-items.

121 Источник: Chrome DevToolsТак вы можете быстро проверить, какое влияние то или иное свойство окажет на веб-страницу, не переключаясь между браузером и редактором кода. Это упростит разработку и немного сэкономит ваше рабочее время.

122 Статьи и документация - это, конечно, хорошо, но иногда гораздо проще и быстрее осваивать технологии по играм. Вот три бесплатных тренажёра, которые помогут сделать это буквально за час.

123 Скриншот: Flexbox Froggy / Skillbox MediaЗамечательная минималистичная игра, в которой вам предстоит помочь лягушатам занять свои листья с помощью Flexbox. Каждый уровень сопровождается подсказками и подробной справкой, что позволяет освоить технологию с нуля.

124 <a>Перейти на сайт Flexbox Froggy</a>

125 Скриншот: Flexbox Defense / Skillbox MediaА здесь, помимо знания свойств Flexbox, пригодится смекалка: нужно расставить башни так, чтобы они успели убить всех врагов, бегущих по дороге. На последних уровнях будьте готовы поломать голову :)

126 <a>Перейти на сайт Flexbox Defense</a>

127 Скриншот: Flex Box Adventure / Skillbox MediaЖил-был король Артур. Он правил своим королевством честно и справедливо, но у него было три злобных брата, которые похитили золото из его замка. Так начинается игра Flex Box Adventure.

128 Это, пожалуй, самый весёлый тренажёр по Flexbox. Вам предстоит выполнить 24 миссии, каждая из которых помогает отточить навыки владения инструментом до автоматизма. А если задания покажутся слишком простыми, вы всегда можете повысить уровень сложности.

129 <a>Перейти на сайт Flex Box Adventure</a>

130 <a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>