Генератор flexbox верстки

Что такое Flexbox на самом деле?

Спецификация Flexbox описывает метод компоновки так:

Я думаю, что ключевая фраза здесь “распределение пространства и выравнивание контента”. Flexbox — это все о том, чтобы взять кучу элементов (которые имеют разные размеры) и поместить их в контейнер (который сам может быть переменного размера). Flexbox — это мягкость. Он пытается создать наилучший макет для наших элементов, давая большим элементам больше пространства, а меньшим элементам меньше пространства, тем самым сохраняя читаемость контента.

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

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

Существуют также шаблоны, в которых вы хотите иметь строки с переносом, однако вам не нужна строгая сетка. Если мы возьмем оригинальный пример Grid против Flexbox, где мы используем в сетке синтаксис repeat auto-fill, а затем flex-контейнер с переносом строк, то сразу увидим разницу между этими двумя методами.

В примере Grid элементы сетки выстраиваются в строки и столбцы. Когда число столбцов трека изменяется (в зависимости от пространства), элементы всегда переходят в следующую доступную ячейку сетки. На самом деле, нет никакого способа запросить элемент сетки окружить трек, чтобы заполнить по auto-flow сценарию, если есть другие пустые ячейки.

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

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

Это очень яркий пример того, где мы хотели бы использовать Flexbox над Grid Layout. Если мы хотим, чтобы элементы были обернуты, но занимали пространство, в котором они нуждались, по строкам. Это очень отличается от сетки. Шаблоны, подобные этому, могут представлять собой набор тегов (один или два слова, которые вы хотите хорошо отображать в виде набора элементов), занимающих необходимое пространство, а не жестко вставленных в строгую сетку.

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

В будущем (если будет поддержка браузерами свойств Box Alignment вне гибкого макета), мы можем сделать это, не добавляя display: flex в контейнер. На данный момент, однако, все, что вам нужно сделать, это дополнительная строка CSS, что не является проблемой.

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

Вы также можете выбрать Flexbox в сценарии, где контент нужно привести к низу контейнера, не давая ему всплывать. В примере, расположенном ниже, я делаю контейнер flex-контейнером, отображая содержимое в виде столбца, а затем позволяю середине расти, выталкивая footer вниз компонента.

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

Однако я думаю, что Flexbox будет лучшим в ситуации, когда потребуется добавлять дополнительные элементы, которые я не ожидала в своем дизайне. Например, если у меня есть компонент навигации, использующий Grid, я бы создала достаточно треков для всех элементов, так как я не хотела бы, чтобы создавалась новая строка, если бы у меня было “слишком много” элементов. С flexbox, достаточно длинным, я бы разрешил элементам быть гибкими с flex-basis 0 (или auto), тогда бы элементы сами пускали нового компаньона в строку, освобождая ему место.

justify-content

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

Все возможные значения для свойства:

• flex-start (по умолчанию): элементы сдвигаются к началу строки
• flex-end: элементы сдвигаются к концу строки
• center: элементы выравниваются по центру строки
• space-between: элементы распределяются равномерно (первый элемент в начале строки, последний — в конце)
• space-around: элементы распределяются равномерно с равным расстоянием между собой и границами строки

Зададим свойства для выравнивания элементов по центру:

.parent {
	displayflex;
	border2px solid #FF8C00;
	padding20px;
	width760px;
	justify-contentcenter;
}
.child {
	background-color#ededed;
	border2px solid #768D44;
	padding30px;
	margin10px;
}

CSS Учебник

CSS СТАРТCSS ВведениеCSS СинтаксисCSS СелекторыCSS Как подключитьCSS ЦветаCSS background-colorCSS borderCSS marginCSS paddingCSS height/widthCSS Блочная модельCSS КонтурCSS ТекстCSS ШрифтыCSS ИконкиCSS СсылкиCSS СпискиCSS ТаблицыCSS displayCSS max-widthCSS positionCSS overflowCSS float/clearCSS inline-blockCSS ВыравниваниеCSS КомбинаторыCSS Псевдо-классыCSS Псевдо-элементыCSS opacity/transparencyCSS Панель навигацииCSS Выпадающие спискиCSS Галерея изображенийCSS Спрайты изображенийCSS Селекторы атрибутовCSS ФормыCSS СчётчикиCSS Макет веб-сайтаCSS ЕдиницыCSS Специфичности

Разница между устаревшими подходами и современными стандартами

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

Flexbox и Grid — это идеальные решения для CSS-разметки, являющиеся современными стандартами. Если вам необходимо писать CSS-код на хорошем уровне, то обязательно изучите их.

Решение задачи с помощью Flexbox

Контекст форматирования Flexbox инициализируется путем создания flex-контейнера.

Родительским элементом является . Он содержит боковую панель и основную зону. Создаём контейнер:

И получаем:

Flexbox в действии

Не забудем о пропорциях:

Вуаля! Проблему можно считать решенной:

Задача решена

С Flexbox можно делать много разных вещей:

• Отцентрировать боковую панель и основную зону по вертикальной оси:

• Изменить положение одного из дочерних элементов:

• Менять порядок дочерних элементов без изменения HTML-кода:

И я затронул лишь верхушку айсберга Flexbox.

Flexbox доступен в большинстве поддерживаемых браузеров. Им можно полноценно пользоваться в Firefox с 28 версии, Chrome с 29, Safari с 6.1 и Edge с 12.

Прим. перев. Разобраться с Flexbox поможет наше наглядное введение.

Решение проблемы с помощью Grid

В отличие от Flexbox, который по большей части работает в одном измерении, с CSS Grid вы можете использовать как ряды, так и колонки. Посмотрим, как решить нашу проблему с его помощью.

Начинается всё так же, как и в случае с Flexbox. Создаём контейнер:

Вот весь CSS:

И вот что мы получим:

Первичный вариант

Grid доступен в большинстве поддерживаемых браузеров, хотя и в меньшем количестве. Им можно полноценно пользоваться в Firefox с 52 версии, Chrome с 57, Safari с 10.1 и Edge с 16.

Наше последнее изображение пока никак не отличается от предыдущих. Так в чём же магия?

Что, если мы разделим пропорции ширины, как раньше:

Пропорциональное распределение ширины для дочерних элементов

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

Вот мы и подошли к сути Grid-разметки. После инициализации Grid-контейнера при помощи необходимо определить ряды и строки внутри него.

Вот как это делается:

Решение в одну строку — красиво, не правда ли? определяет пропорции столбцов в сетке.

Задача решена

Но с помощью Grid можно сделать гораздо больше.

Сначала добавим немного цвета главному блоку, чтобы примеры были более наглядными:

Вот что мы должны получить:

Заливка цветом зоны основного контента

Посмотрим, что хорошего может предложить Grid:

• Можно определить разрыв между столбцами:

  Вот результат:

  Нет необходимости в добавлении отступов к блокам и : это делает .

• Можно сделать столько столбцов, сколько вам нужно. Примеры выше использовали только по одному элементу и . Добавим ещё два:

  Grid сам понял, что нам надо — не пришлось даже трогать CSS.

• Можно определить пробел между строками:

  Для упрощения можно использовать сокращение: вместо и .

• Можно определять размеры строк:

  Теперь высота первой, второй и третьей строк равна 200, 300 и 400 пикселей соответственно.

Для начала хватит и этого — но это далеко не всё.

Свойства для родительского элемента (Flex-контейнера)

display

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

Обратите внимание, что CSS колонки не влияют на flex-контейнер

flex-direction

Устанавливает основную ось, таким образом определяет направление элементов расположенных в контейнере. Flexbox (помимо опциональной обёртки) представляет собой концепцию однонаправленного макета. Думайте о flex-элементах, прежде всего как горизонтальных строках или вертикальных колонках.

• row (по умолчанию) —  слева направо в ; справа налево в ;
• row-reverse — справа налево в  ; слева направо в  ;
• column — тоже самое что , только сверху вниз;
• column-reverse — тоже самое что , только снизу вверх;

flex-wrap

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

• nowrap (по умолчанию) — все flex-элементы будут расположены на одной строке;
• wrap — flex-элементы будут расположены на нескольких строках, сверху вниз;
• wrap-reverse — flex-элементы будут расположены на нескольких строках, снизу вверх;

justify-content

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

flex-start (по умолчанию) — элементы прижимаются к началу строки;

flex-end — элементы прижимаются к концу строки;

center — элементы располагаются по центру вдоль строки;

space-between — элементы размещаются равномерно на линии; первый элемент находится в начале строки, последний элемент находится в конце строки;

space-around — элементы размещаются равномерно на линии с одинаковым пространством возле них

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

align-items

Это свойство определяет поведение flex-элементов вдоль поперечной оси на текущей строке. Думайте о нём как о , только для поперечной оси (перпендикулярной основной оси).

• flex-start — элементы размещаются в начале поперечной оси;
• flex-end — элементы размещаются в конце поперечной оси;
• center — элементы располагаются по центру поперечной оси;
• baseline — элементы выравниваются по базовой линии;
• stretch (по умолчанию) — растягиваются чтобы заполнить весь контейнер (по-прежнему соблюдают / );

align-content

Примечание. Это свойство не действует, когда есть только одна строка flex-элементов.

• flex-start — строки располагаются в начале контейнера;
• flex-end — строки располагаются в конце контейнера;
• center — строки размещаются по центру контейнера;
• space-between — строки распределяются равномерно, первая строка располагается в начале контейнера, а последняя строка в конце;
• space-around — строки распределяются равномерно, с одинаковым расстоянием между ними;
• stretch (по умолчанию) — строки растягиваются по всей ширине, чтобы занять оставшееся пространство;

min-width имеет значение

Возможно, ты думаешь, что несложно заставить все flex-элементы внутри flex-контейнера сжиматься, для того чтобы уместить контент. Наверняка, если ты укажешь flex-shrink: 1 на элементах, они так и будут себя вести, правда?

Может, пример.

Скажем, у тебя есть часть DOM, которая отображает книгу на продажу и кнопку чтобы ее купить.

Ты разместил все с помощью flexbox и все хорошо.

(Поскольку ты хочешь кнопку «Купить» справа — даже для очень коротких названий — ты, будучи умным, указал margin-left: auto)

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

И потом получаешь неприятный сюрприз. Совсем не хорошего рода.

Некий дурень, много о себе возомнивший, написал книгу с длинным словом в названии.

Все сломано!

Если красная граница обозначает ширину смартфона, и ты скрываешь переполнение (overflow: hidden), ты только что потерял свою кнопку «Купить». Твой коэффициент конверсии — как и эго бедного автора — будет страдать.

(Примечание: к счастью, там где я работаю, есть хорошая QA команда, которая наполнила нашу базу данных разнородным текстом, наподобие такого. В частности, именно эта проблема побудила меня прочитать спецификацию.)

Оказывается, такое поведение происходит из-за того, что min-width элемента описания изначально установлена в auto, что в данном случае равняется ширине слова Electroencephalographically (электроэнцефалографически). Flex-элементу буквально не разрешается быть уже чем это слово.

Решение? Переопределить эту проблемную минимальную ширину min-width: auto установив min-width: 0, указывая flexbox’у, что этот элемент может быть уже, чем содержимое внутри него.

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

Результат будет таким:

Опять же, min-width: 0 не какой-то хак для обхода нелепости, это .

В следующем разделе, я вернусь к тому, что кнопка «Купить» совсем не 80 пикселей по ширине, как я довольно ясно ей сказал.

Свойства для дочерних элементов (Flex элементов)

order

По умолчанию, все элементы располагаются в исходном для них порядке. Однако, свойство  управляет порядком, в котором располагаются элементы внутри контейнера.

flex-grow

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

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

Нельзя указывать отрицательные числа.

flex-shrink

Это свойство определяет возможность элемента уменьшаться в размере, при необходимости.

Нельзя указывать отрицательные числа.

flex-basis

Определяет размер элемента по умолчанию, до распределения оставшегося пространства. Это может быть длина (20%, 5rem и т.д.) или ключевое слово. Ключевое слово  означает «выглядеть как моё свойство  или «. Ключевое слово  означает что «размер основан на содержимом элемента» — это ключевое слово пока не очень хорошо поддерживается, поэтому его трудно проверить, а ещё труднее узнать что делают его братья ,  и .

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

flex

Это сокращение для ,  и . Второй и третий параметры ( и ) не обязательны. Значение по умолчанию установлено в .

Рекомендуется использовать это сокращённое свойство, а не указывать значения индивидуально. Короткая комбинация задаёт другие значения разумно.

align-self

Это свойство позволяет переопределить выравнивание по умолчанию (или заданное с помощью свойства ) для отдельных flex-элементов.

Пожалуйста посмотрите на объяснение свойства , чтобы понимать доступные значения.

Обратите внимание, что ,  и  не оказывают никакого влияния на flex-элемент

Примеры

Давайте начнём с самого простого примера, решающего задачу, которая возникает почти каждый день: идеальное центрирование. Не может быть ничего проще, если вы используете Flexbox.

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

Теперь давайте используем ещё несколько свойств. Рассмотрим список из 6 элементов, все с фиксированным размером в эстетическом отношении, но они могут быть автоматическими. Мы хотим, чтобы они были равномерно распределены вдоль горизонтальной оси и чтобы при изменении размера браузера всё было в порядке (без медиа-запросов!).

Готово! Всё остальное, это лишь некоторые проблемы дизайна. Ниже приведён пример на CodePen, обязательно зайдите туда и попробуйте изменить размер окон, чтобы посмотреть что произойдёт.

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

Давайте попробуем сделать что-нибудь ещё лучше, играясь с гибкостью наших flex-элементов! Как насчёт трёхколоночного mobile-first макета с шапкой и футером на всю ширину экрана, и чтобы не было зависимости от исходного порядка элементов.

Как начать верстать по Flexbox?

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

Обратите внимание на важный момент, что все дочерние элементы флекс контейнера становятся флекс элементами, а не все вложенные потомки, то есть элементы, вложенные уже в дочерние элементы не будут являться флекс элементами по умолчанию:

<section> <!-- флекс контейнер -->
	<div></div> <!-- дочерний флекс элемент -->
	<div></div> <!-- дочерний флекс элемент -->
	<div> <!-- дочерний флекс элемент -->
		<p>Первый абзац</p> <!-- не является флекс элементом -->
		<p>Второй абзац</p> <!-- не является флекс элементом -->
		<p>Третий абзац</p> <!-- не является флекс элементом -->
	</div>
</section>

У вас может возникнуть логичный вопрос, а что требуется для того, чтобы сделать флекс контейнер? Для этого достаточно установить свойство display элемента в значение flex, или inline-flex:

section {
	display: flex; // элемент отображается как блочный флекс контейнер
}

Перейдем к рассмотрению наглядного примера:

<!DOCTYPE html>
<html>
<head>
	<title>Пример размещения флекс контейнера</title>
<style> 
section {
	display: flex; /* блочный флекс контейнер */
}
div {
	background: rgb(0,150,208); /* цвет заднего фона */
	color: #fff; /* цвет текста */
	margin: 3px; /* внешние отступы со всех сторон */
}
</style>
</head>
	<body>
		<section> <!-- флекс контейнер -->
			<div></div> <!-- дочерний флекс элемент -->
			<div></div> <!-- дочерний флекс элемент -->
			<div> <!-- дочерний флекс элемент -->
				<p>Первый абзац</p> <!-- не является флекс элементом -->
				<p>Второй абзац</p> <!-- не является флекс элементом -->
				<p>Третий абзац</p> <!-- не является флекс элементом -->
			</div>
		</section>
	</body>
</html>

В этом примере мы установили для элемента <section> значение свойство display элемента в значение flex, а это означает, что он стал блочным флекс контейнером, а все вложенные в него дочерние элементы <div> стали флекс элементами. Для этих элементов мы указали стили, определяющие цвет текста (color), заднего фона (background) и внешние отступы (margin).

У многих редакторов кода по умолчанию встроен, или доступен для скачивания удобный плагин для быстрой разметки Emmet, он позволяет сделать основную разметку этого примера следующим образом: section>div*3>lorem + Tab (значение lorem генерирует текст, который имеется на изображении ниже).

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

не являются по умолчанию флекс элементами и расположены в потоке третьего элемента

как обычные блочные элементы

Если в этом есть необходимость, то чтобы сделать их флекс элементами, как вы можете догадаться, необходимо для их родителя установить, что он является блочным (flex), или строчным (inline-flex) флекс контейнером, но об этом в следующем примере.

Результат нашего примера:

Рис. 204 Пример размещения флекс контейнера.

Вместо заключения

Итак, мы выяснили, в каких случаях уместнее использовать Float, Flexbox и Grid, но возможно ли их смешение? Давайте разберемся.

Если вы начали, например, использовать , то конечно же писать там свойства, которые относятся к Grid неуместно. Это неправильно.

Однако, если в одной части страницы блок выполнен полностью из Flexbox, а далее вам потребуется в следующем блоке сделать картинку, которая будет обрамляться текстом, то будет правильным использовать float.

Пример:

Не забывай задавать свои вопросы по вёрстке или фронтенд разработке у профессионалов на FrontendHelp в режиме онлайн.

justify-self

Copied!

Copied!

Copied!

Copied!

Copied!

Copied!

Copied!

Выравнивает содержимое элемента вдоль оси строки (в отличии от align-self, который выравнивает вдоль оси столбца).

Наследуется: нет.

Применяется к: содержимому внутри отдельного элемента.

Значение по умолчанию: auto.

start

Выравнивает содержимое по левой части области.

end

Выравнивает содержимое по правой части области.

center

Выравнивает содержимое по центру области.

stretch

Заполняет всю ширину области (по умолчанию).

Обработка размеров flex-элемента

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

• flex-grow: 0;
• flex-shrink: 1;
• flex-basis: auto.

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

Между тем, если flex-basis установить в auto а flex-grow: 1, то будет распределено только свободное пространство, т.е. пространство без контента.

В ситуации, когда нет свободного места, например, когда у нас контента больше, чем может поместиться в одной строке, тогда ничего не распределяется.

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

Определение auto (defining auto)

Когда auto назначается как значение чего-нибудь в CSS, оно будет иметь очень специфическое значение в этом контексте, которое стоит посмотреть. Рабочая группа CSS тратит много времени на выяснение того, что означает auto в любом контексте, как объясняет этот разговор с редактором спецификаций Fantasai.

В спецификации мы можем найти информацию о том, что означает auto при использовании в качестве flex-basis. Термины, определенные выше, должны помочь нам проанализировать это утверждение.

Таким образом, если наш flex-basis установлен в auto, Flexbox просмотрит значение свойства main size. Мы должны иметь main size, если мы дали одному из наших flex-элементов ширину. В примере ниже, все элементы имеют ширину 110px, поэтому это значение используется в качестве main size т.к. начальное значение flex-basis — auto.

Однако в нашем первоначальном примере есть элементы, у которых нет ширины, это означает, что их main size — auto, и поэтому нам нужно перейти к рассмотрению следующего высказывания: “если это значение само по себе auto, то используется значение content.”

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

Спецификация определяет content следующим образом:

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

Это объясняет, почему, когда у нас есть небольшое количество текста в каждом элементе, текст не переносится. flex-элементы по умолчанию имеют auto размер, поэтому Flexbox берет их размер в свойстве max-content, элементы помещаются в контейнер такого размера, и работа выполнена!

На этом история не заканчивается, так как когда мы добавляем еще контент, элементы не остаются в размере max-content. Если бы они это делали, то вырвались бы из flex-контейнера и вызвали бы переполнение. Как только они заполнят контейнер, содержимое начинает переноситься, и элементы становятся разных размеров, основываясь на содержимом внутри них.

Margin обладает особыми силами

Я думал, что если, например, ты хочешь заголовок с логотипом и названием сайта слева, а кнопкой логина справа…

… тебе следует дать названию flex: 1, чтобы прижать остальные элементы к другому концу строки.

Вот почему flexbox — Очень Хорошая Вещь. Простые вещи такие простые.

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

Отличные новости! Вместо этого, ты можешь сказать прямо: «прижми этот элемент вправо», определив margin-left: auto на нужном элементе. Думай об этом как о float: right.

Например, если элемент слева является изображением:

Мне не нужно применять flex к изображению, мне не нужно применять space-between к flex-контейнеру, я просто установлю margin-left: auto на кнопке «Войти» («Sign in»):

Тебе может показаться это некоторым хаком, но нет, это прямо там в как способ прижать flex-элемент в конец flexbox’а. У способа даже есть своя глава: «».

О, мне также следует здесь упомянуть, что я предполагаю flex-direction: row везде в этом блог-посте, но все применимо также и к row-reverse или column или column-reverse.