Flex

Что такое 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), тогда бы элементы сами пускали нового компаньона в строку, освобождая ему место.

Как сделать карточки на flexbox

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

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

Вдохновение

bbc.co.uk недавно он дебютировал (в бета-версии)своей последней итерации. Он выглядит чистым и просторным с этим дизайном на основе карт. Игнорируя жалкие заголовки, это выглядит очень хорошо.

Первые карты построены и выровнены по строке с помощью Flexbox, но мы собираемся расширить макет с помощью Grid.

Примечание: вам понадобится браузер, который поддерживает Grid.

Опыт веб-студии ITSOFT

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

При использовании Flex нужно учитывать, что:

• Flex-элементы по умолчанию ужимаются под свое содержимое; Это может пригодиться, когда есть блоки, размер которых изначально неизвестен и зависит от количества контента.

  Примеры: пункты меню в https://ketoplus.ru/

• Внешние отступы flex-элементов не схлопываются и не выпадают, в отличие от блочной модели.

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

  Пример: блоки в http://velpharm.ru/about/veltrade/

• Flex-элементы умеют перераспределять свободное пространство вокруг себя, таким образом меняя свои размеры;

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

  Пример: главная страница http://oflomil.ru/

• Внутри одного флекс-контейнера можно менять порядок флекс-элементов, хотя в DOM-дереве порядок остается неизменным.

  Бывают макеты страниц, в которых порядок следования элементов отличается на мобильной и десктопной версиях. Flex справится с задачей.

  Пример: разный порядок следования логотипа и навигации в шапке в мобильной и десктопной версиях (http://elmucin.ru/).

• Flex-элементу можно задать не только горизонтальные автоматические отступы, но и вертикальные; к тому же есть специальные свойства, с помощью которых очень просто выравнивать элементы внутри флекс-контейнера по горизонтали или вертикали.

  Пример: кнопка всегда находится в нижней части карточки статьи (https://rabiet.ru/experts/), блок продукция (https://stomatofit.ru/#products).

• Flex-элементы могут переноситься на следующую строку, если указано соответствующее свойство.

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

  Пример: каталог Велфарм (http://velpharm.ru/catalog/), блок Где купить (http://valosemid/#partners, https://gopantomid.ru/)

Стоит отметить, что Flexbox поддерживается в Internet Explorer 10-11, хоть и с некоторыми оговорками.

Некоторые интересные фишки Flex мы реализовали на сайте oflomil.ru. На разводящей странице есть 3 столбца на всю высоту видимой области экрана. На мобильном они трансформируются в 3 строки, каждая из которых равномерно занимает место в видимой части экрана. На продуктовых страницах без единого скрипта реализована бегущая строка. Текстовые элементы расположены в ряд благодаря inline-flex. Все свободное пространство в ряду распределено между этими элементами равномерно. Наш собственный сайт также свёрстан с использованием Flex.

Реализация бегущей строки с Flex

Из недостатков можно отметить то, что Flex не хватает при верстке писем. Не во всех почтовых клиентах он работает корректно.

В скором времени большую распространённость получит технология Grid. Однако Grid не замена Flexbox. Флексы в связке с гридами помогут решать задачи, которые раньше были сложными или вовсе невозможными. К примеру, Masonry-раскладка — одна из тех вещей, которую нельзя полноценно реализовать на данный момент. После появления возможностей спецификации Grid Layout 3 уровня в браузерах, реализация такой раскладки станет возможной и к тому же простой.

Дата-центр ITSOFT — размещение и аренда серверов и стоек в двух дата-центрах в Москве. За последние годы UPTIME 100%. Размещение GPU-ферм и ASIC-майнеров, аренда GPU-серверов, лицензии связи, SSL-сертификаты, администрирование серверов и поддержка сайтов.  

Свойство align-content

Это свойство применяется только в том случае, если в контейнере flexbox имеется несколько строк элементов. Эффект, который мы получим, будет выравниванием и разделением строк на вторичной оси.

Примечание: Хотите получить несколько строк элементов вконтейнере flex, нужно будет применить к ним “flex-flow: wrap”, и, конечно, есть достаточно элементов с достаточной шириной, такдля их распространения требуется несколько строк.

В конце концов, эффект, который мы получаем с align-content, похож на эффект, который мы получаем с align-items, в том смысле,он будет применять к дочерней оси свой эффект распределения, только здесь мы указываем не на размещение одной строки, а на все строки. Кроме того, это также похоже на justify-content в том смысле, мы определяем разделение между элементами, но влияем на строки элементов, а не на свободные элементы.

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

Я думаю, это будет лучше понятно с точки зрения следующей картины.

flexbox froggy 24 уровень Вывод

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

Как использовать Flexbox

(О выборе между Grid и Flexbox можно почитать в статье «Grid — для макетов, Flexbox — для компонентов», — прим. ред. Techrocks).

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

Но что, если нам нужно расположить их в ряд?

Здесь нам на помощь приходит Flexbox. Этот функционал CSS позволяет располагать элементы с учетом строк и столбцов, а также задавать промежутки между ними (пространство вокруг них).

Для начала давайте создадим родительский блок с тремя элементами-потомками внутри него.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Position and Flexbox</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="parent">
        <div class="child-one"></div>
        <div class="child-two"></div>
        <div class="child-three"></div>
    </div>
</body>
</html>

CSS:

/* Flexbox container */
.parent {
    background-color: #00AAFF;
    width: 300px;
    height: 300px;
    display: flex;
  }

  .child-one {
    background-color: rgb(116, 255, 116);
    width: 300px;
    height: 300px;
  }
  
  .child-two {
    background-color: rgb(248, 117, 117);
    width: 300px;
    height: 300px;
  }
  
  .child-three {
    background-color: rgb(255, 116, 232);
    width: 300px;
    height: 300px;
  }

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

Это расположение, принятое во Flexbox по умолчанию.

Давайте посмотрим другие варианты расположений.

Как располагать элементы при помощи Flexbox

flex-direction

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

Свойству назначают значение row, если элементы нужно расположить в ряд, слева направо (это значение по умолчанию):

Значение позволяет расположить элементы в виде столбцов, т. е. вертикально:

Значение работает так же, как , но порядок элементов будет обратным. Первый элемент станет последним, а последний — первым. расположение элементов будет противоположным тому, что было бы при значении :

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

justify-content

Это свойство определяет выравнивание элементов вдоль горизонтальной оси контейнера.

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

При значении — в начале страницы.

При значении — в конце страницы.

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

Вы видите, что пространства между , и одинаковые, а пространства перед и после — меньше.

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

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

align-items

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

Значение позволяет центрировать элементы по вертикали.

При значении элементы выравниваются по верхнему краю страницы.

При значении — выравниваются по нижнему краю.

Теперь вы знаете основы Flexbox.

Как выравнивать элементы по центру экрана

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

Когда не стоит использовать флексы?

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

Вот пример грида с двумерной раскладкой. Раскладка одновременно и в строках, и в колонках. Пример на флексах — это одномерная раскладка. Мы позволили перенос флекс-строк, но распределение места на строке ведётся построчно. Каждая строка естественно ведёт себя как новый флекс-контейнер по направлению главной оси.

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

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

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

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

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

See the Pen Smashing Flexbox Series 4: wrapped flex items with percentage widths by rachelandrew (@rachelandrew) on CodePen.

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

Помните, что также можно переключаться между методами раскладки, используя флексы на одной контрольной точке и гриды на другой.

Практические примеры

Видеоурок — тут

Горизонтальная структура

Примеры построения горизонтальной структуры flex-элементов (колонок).

Три колонки резиновые

Четыре колонки в два ряда

Три колонки Одна большая

Четыре колонки резина + отступы (10px)

Две колонки сайдбар (200px)

1

2

3

HTML код: тут

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d;
display:flex;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;
flex: 0 1 33.333%;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

}

/* flex-элемент №3 */

.block__element_3{

}

/* контент */

.block__content{

background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */

}

1

2

3

4

HTML код: тут

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d;
display:flex;
flex-wrap:wrap;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;
flex: 0 1 50%;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

}

/* flex-элемент №3 */

.block__element_3{

}

/* flex-элемент №4 */

.block__element_4{

}

/* контент */

.block__content{

background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */

}

1

2

3

HTML код: тут

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d;
display:flex;
flex-wrap:wrap;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

flex: 0 1 100%;

}

/* flex-элемент №2 */

.block__element_2{

flex: 0 1 50%;

}

/* flex-элемент №3 */

.block__element_3{

flex: 0 1 50%;

}

/* контент */

.block__content{

background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */

}

1

2

3

4

HTML код: тут

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

display: flex;
margin: 0px -5px;

}

/* flex-элемент */

.block__element{

padding: 0px 5px;
flex: 0 1 25%;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

}

/* flex-элемент №3 */

.block__element_3{

}

/* flex-элемент №4 */

.block__element_4{

}

/* контент */

.block__content{

background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */

}

1

2

HTML код: тут

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d;
display:flex;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

flex: 0 0 200px;

}

/* flex-элемент №2 */

.block__element_2{

flex: 1 1 auto;

}

/* контент */

.block__content{

background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */

}

Вертикальная структура

Примеры построения вертикальной структуры flex-элементов (ряды).

Три ряда второй элемент большой

Три ряда по центру

Три ряда раскиданы

1

2

3

HTML код: тут

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d;
display:flex;
flex-direction:column;
height: 300px;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

flex: 1 1 auto;

}

/* flex-элемент №3 */

.block__element_3{

}

/* контент */

.block__content{

background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */

}

1

2

3

HTML код: тут

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d;
display:flex;
flex-direction:column;
height: 300px;
align-items: center;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

}

/* flex-элемент №3 */

.block__element_3{

}

/* контент */

.block__content{

background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */

}

1

2

3

HTML код: тут

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d;
display:flex;
flex-direction:column;
height: 300px;
justify-content: space-between;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* flex-элемент №1 */

.block__element_1{

}

/* flex-элемент №2 */

.block__element_2{

}

/* flex-элемент №3 */

.block__element_3{

}

/* контент */

.block__content{

background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */

}

По центру

Центрируем блок.

Пример №1

1

HTML код: тут

CSS код:

/* родитель */

.block{

}

/* flex-контейнер */

.block__row{

border: 10px solid #ece89d;
display:flex;
justify-content:center;
align-items:center;
height: 300px;

}

/* flex-элемент */

.block__element{

border: 5px solid #5e5373;

}

/* контент */

.block__content{

background-color: #18b5a4;
/* плюс прочие стили для текста, отступы */

}

Обработка размеров 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-контейнера и вызвали бы переполнение. Как только они заполнят контейнер, содержимое начинает переноситься, и элементы становятся разных размеров, основываясь на содержимом внутри них.

Свойства для Родителя (flex контейнер)

flex-direction

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

flex-wrap

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

здесь

justify-content

flex-start (по умолчанию): элементы сдвинуты в начало flex-direction направления.

flex-end: элементы сдвинуты ближе к концу flex направления.

start: элементы сдвинуты к началу writing-mode направления.

end: элементы сдвинуты в конце writing-mode направления.

left: элементы сдвинуты по направлению к левому краю контейнера, если это не имеет смысла flex-direction, тогда он ведет себя как start.

right: элементы сдвинуты по направлению к правому краю контейнера, если это не имеет смысла flex-direction, тогда он ведет себя как start.

center: элементы центрированы вдоль линии

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

space-around: элементы равномерно распределены по линии с одинаковым пространством вокруг них

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

space-evenly: элементы распределяются таким образом, чтобы расстояние между любыми двумя элементами (и расстояние до краев) было одинаковым.

space-betweenесть подробные графикиflex-startflex-endcentersafeunsafesafe

align-items

• stretch (по умолчанию): растягивать, чтобы заполнить контейнер (все еще соблюдаются min-width / max-width)
• flex-start / start / self-start: элементы размещаются в начале поперечной оси. Разница между ними невелика и заключается в соблюдении flex-direction правил или writing-mode правил.
• flex-end / end / self-end: элементы располагаются в конце поперечной оси. Разница опять-таки тонкая и заключается в соблюдении flex-direction или writing-mode правил.
• center: элементы центрированы по поперечной оси
• baseline: элементы выровнены, по их базовой линии

safeunsafeхотя это поддерживается не всеми браузерами

align-content

justify-contentПримечание

• flex-start / start: элементы, сдвинуты в начало контейнера. Более поддерживаемый flex-start использует, flex-direction в то время как start использует writing-mode направление.
• flex-end / end: элементы, сдвинуты в конец контейнера. Более поддерживаемый flex-end использует flex-direction в то время как end использует writing-mode направление.
• center: элементы выровнены по центру в контейнере
• space-between: элементы равномерно распределены; первая строка находится в начале контейнера, а последняя — в конце
• space-around: элементы равномерно распределены с равным пространством вокруг каждой строки
• space-evenly: элементы распределены равномерно, вокруг них одинаковое пространство
• stretch (по умолчанию): линии растягиваются, чтобы занять оставшееся пространство

safeunsafe