Wrap flex css: flex-wrap — CSS | MDN

Flexbox CSS #2 — flex-direction

В текущем видео разбираем два свойства, первое flex-direction влияющее на управление Осей, второе flex-wrap на многострочность, и многоколоночность элементов. В конце закрепляем все на практическом примере.

Посмотреть видео — 2# Видео-урок по flexbox CSS

See the Pen #2 Flexbox – flex-direction | flex-wrap by Denis (@Dwstroy) on CodePen.

Свойство flex-direction (направление Осей)

Начинаем со свойства flex-direction, оно позволяет изменить порядок направление flex-элементов выводить их как в строчном расположении, так и в колоночном виде. Свойство задается для контейнера и принимает четыре значения. 

flex-direction: row — значение установленное по умолчанию, расположение элементов начинается с лева на право.

flex-direction: row;

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

 flex-direction: row-reverse;

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

Всего их две, есть основная ось, которую называют «Главная», и вторая ось «Поперечная», которая идет поперек главной оси.

У каждой из осей есть две составляющие, это начало ее, и конец.

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

При помощи значение row-reverse, мы переворачиваем главную ось, тем самым меняем направлении ее в нутрии контейнера, все, что было насажено на шампур, соответственно переворачивается вместе с ним. Но обратите внимание, как был элемент «1» в начале оси, так он в начале оси и остался, только теперь ось начинает не с начала, а с его конца.

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

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

flex-direction: column;

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

flex-direction: column-reverse;

Свойство flex-wrap – (многострочность элементов)

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

Свойство применяется к контейнеру и принимает всего три значения.

flex-wrap: nowrap, значение по умолчанию, flex-элементы не переносятся, располагаются в одну линию или колонку, то есть то что видим сейчас.

flex-wrap: nowrap;

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

flex-wrap: wrap;

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

height: 150px;
flex-direction: column-reverse;

flex-wrap: wrap-reverse, располагает все элементы в обратном порядке слева на права, при этом перенос происходит снизу вверх.

flex-wrap: wrap-reverse;

И если у нас есть представление, как использовать свойство flex-wrap, к примеру, для фотогалереи, списков товаров, при помощи которого можем делать респонсивный веб-дизайн, то свойство flex-direction при помощи которого меняем направление осей, не каждому понятно, где его можно применять. Вот именно этот вариант мы рассмотрим в практическом примере.

Перейти к примеру — Смотреть пример

1 предыдущая статья

Анимированное руководство по CSS flex

Свойство CSS flex — это сокращенное свойство, определяющее способность гибкого элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. Это свойство устанавливает flex-grow, flex-shrink и flex-basis.

Изначально свойство flex не подходит для обёртки элементов — его работа во многом схожа с работой overflow:hidden.

Первое, с чего стоит начать работу с flex, — это flex-wrap.

Flex Wrap

Добавьте свойство flex-wrap: wrap и посмотрите на поведение flex-элементов.

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

Примечание Высота не указана (auto/unset), но контейнер может растягиваться.

Это частый случай, когда вам нужно поместить произвольное количество элементов неопределённого размера в видимую область контейнера/экрана.

Направление элементов можно отзеркалить свойством flex-direction: row-reverse:

Возможно, такое свойство подойдёт для чтения справа налево. Ещё можно использовать float:right для всех элементов, которые находятся на одной линии с flex-end. Это свойство отличается от row-reverse, т. к. в нём сохраняется корректный порядок элементов.

Justify Content

Свойство justify-content определяет горизонтальное положение элементов. Это свойство похоже на Flex Wrap, но в justify сохраняется первоначальный порядок элементов.

В следующем примере  (justify-content: center) все элементы вне зависимости от их ширины имеют горизонтальное позиционирование по центру родительского контейнера. Это похоже на свойства position: relative; margin: auto.

Значение space-between добавляет пробелы между всеми inner-элементами, тем самым растягивая строку на всю ширину контейнера:

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

Пример выше со значением space-between не имеет отступов на угловых элементах. Пример ниже со значением space-around делает равные внешние отступы на всех элементах.

Идентичный прошлому пример с растянутым элементом middle:

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

Align Content

Все примеры выше имели свойство justify-content. Но элементы также можно позиционировать по вертикали. Свойство justify-content (выше) и свойство align-content (ниже) похожи. Разница только в их направлении — вертикальном или горизонтальном.

Вот пример flex-элементов при вертикальном позиционировании:

У space-evenly есть несколько особенностей значения:

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

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

На практике

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

Комбинация vertical align и justify content

В этом случае контент будет отцентрирован во всех направлениях.

Space evenly

Используя значение space-evenly сразу для align-content и justify-content, можно получить следующий результат:В этом случае нужно стараться делать элементы одной ширины. Пример выше немного странный из-за нечётного количества элементов. Для более красивой масштабируемости количество элементов должно быть чётным.К тому же, если количество элементов будет чётным, то масштабирование будет более чистым и чувствительным без сеток на CSS и танцев с бубном на JS.

Центрирование элементов по вертикали внутри других элементов создаёт проблемы последние десять лет. Flex может их решить. Если использовать свойство space-evenly в двух направлениях, отступы будут появляться автоматически даже при разной высоте элемента: Если вы посмотрите на flex в целом, то заметите, что это, наверное, самое полезное сочетание flex-свойств.

Размер элементов

Убедитесь, что вы явно указываете размер элементов. Если этого не сделать, некоторые свойства увеличения во flex попросту не будут работать. Используйте min-width, max-width, и width/height соответственно. Эти свойства могут кардинально повлиять на масштабируемость вашего контента.

Примеры комбинаций свойств в одной анимации

1. flex-direction: row; justify-content: [value];
2. flex-direction: column; justify-content: [value];

Хотя рекомендуется использовать flex внутри CSS-сеток, это совсем не обязательно. Flex хорош и сам по себе.

Перевод статьи «CSS Flex – Animated Tutorial»

Реклама на Tproger: найдем для вас разработчиков нужного стека и уровня.

Подробнее

Реклама на tproger.ru

Загрузка

выравнивание, многострочность — учебник CSS

Давайте познакомимся со свойствами, предназначенными специально для flex-контейнера — элемента, которому задано свойство display со значением flex.

Свойство flex-direction

Свойство flex-direction позволяет управлять направлением главной оси flex-контейнера. Данное свойство предназначено для применения к контейнерам и принимает следующие значения:

• row (значение по умолчанию) — направление главной оси пролегает слева направо (как на схеме выше) для локали LTR и справа налево для локали RTL.
• row-reverse — здесь, наоборот, направление главной оси пролегает справа налево, если локаль LTR, и слева направо, если локаль RTL.
• column — направление главной оси пролегает сверху вниз.
• column-reverse — направление главной оси пролегает снизу вверх.

Работа этих значений выглядит следующим образом:

Свойство justify-content

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

Свойство justify-content применяется к flex-контейнеру, и принимает такие значения:

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

Работа этих значений проиллюстрирована ниже:

Свойство align-items

Align-items — еще одно свойство, применяемое к flex-контейнеру для выравнивания его дочерних элементов. Только на этот раз выравнивание происходит не по главной оси, а по поперечной. Рассмотрим список значений:

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

Примеры для лучшего понимания информации:

Свойство flex-wrap

На примерах выше были показаны примитивные примеры с использованием лишь одной строки (столбца) flex-контейнера. Да, по умолчанию так и есть: flex-контейнер содержит в себе лишь одну линию. Но благодаря свойству flex-wrap можно активировать многострочность во flex-контейнере. Свойство принимает следующие значения:

• nowrap (значение по умолчанию) — flex-элементы размещаются в одной линии, слева направо (либо справа налево для локации RTL).
• wrap — flex-элементы выстраиваются горизонтально в несколько рядов (при условии, что они не помещаются в один ряд). Направление элементов — слева направо (или справа налево для RTL).
• wrap-reverse — принцип действия идентичен предыдущему свойству, с той лишь разницей, что расположение flex-элементов происходит в реверсном порядке.

Свойство flex-flow

Свойство flex-flow — это, по сути, сокращенная запись свойств flex-direction и flex-wrap. Вы можете одной строкой задать направление главной оси и определить многострочность flex-контейнера. В свойстве указываются два значения через пробел: одно для flex-direction, второе для flex-wrap. Пример:

flex-flow: column wrap-reverse;

Свойство align-content

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

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

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

Освоение переноса гибких элементов — CSS: Каскадные таблицы стилей

Flexbox был разработан как одномерный макет, что означает, что он имеет дело с размещением элементов в виде строки или столбца, но не того и другого одновременно. Однако существует возможность переноса flex-элементов на новые строки, создавая новые строки, если flex-direction — это row , и новые столбцы, если flex-direction — это column . В этом руководстве я объясню, как это работает, для чего оно предназначено и в каких ситуациях действительно требуется CSS Grid Layout, а не flexbox.

Начальное значение свойства flex-wrap : nowrap . Это означает, что если у вас есть набор гибких элементов, которые слишком широки для их контейнера, они переполнят его. Если вы хотите, чтобы они переносились, когда они становятся слишком широкими, вы должны добавить свойство flex-wrap со значением wrap или использовать сокращение flex-flow со значениями row wrap или column обернуть .

Предметы будут упакованы в контейнер. В следующем примере у меня есть десять элементов со значением 9.0003 flex-basis 160px и возможность увеличиваться и уменьшаться. Как только первая строка доходит до точки, где не хватает места для размещения другого 160-пиксельного элемента, для элементов создается новая гибкая линия и так далее, пока не будут размещены все элементы. По мере того, как элементы могут увеличиваться, они будут расширяться более чем на 160 пикселей, чтобы полностью заполнить каждую строку. Если в последней строке есть только один элемент, он растянется на всю строку.

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

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

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

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

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

Если вам нужен макет в двух измерениях, вам, вероятно, понадобится макет сетки. Мы можем сравнить наш пример с обернутой строкой выше с версией этого макета в CSS Grid, чтобы увидеть разницу. В следующем живом образце используется CSS Grid Layout для создания макета, который имеет столько столбцов размером не менее 160 пикселей, сколько поместится, распределяя дополнительное пространство между всеми столбцами. Однако в этом случае элементы остаются в своей сетке и не растягиваются, когда их меньше в последнем ряду.

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

Обычно грид-системы на основе flexbox работают, возвращая flexbox в знакомый мир макетов на основе float. Если вы назначаете ширину в процентах гибким элементам — либо как flex-basis , либо добавляя ширину к самому элементу, оставляя значение flex-basis как auto — вы можете получить впечатление двухмерного макета. Вы можете увидеть, как это работает в примере ниже.

Здесь я установил flex-grow и flex-shrink на 0 для создания негибких гибких элементов, а затем я контролирую гибкость с помощью процентов, как мы делали это в макетах с плавающей запятой.

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

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

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

Спецификация flexbox подробно описывает, что должно произойти, если flex-элемент свернут путем установки видимости: свернуть для элемента. См. документацию MDN для свойства видимости . Спецификация описывает поведение следующим образом:

«Указание visibility:collapse для элемента flex приводит к тому, что он становится свернутым элементом flex, производя эффект, аналогичный Visibility:collapse для строки таблицы или столбца таблицы: свернутый элемент flex полностью удаляется из рендеринга, но остается позади «стойка», которая поддерживает стабильный поперечный размер flex-линии. Таким образом, если flex-контейнер имеет только одну flex-линию, динамически сворачивающиеся или разворачивающиеся элементы могут изменить основной размер flex-контейнера, но гарантированно не повлияют на его поперечный размер и не приведет к тому, что остальная часть макета страницы будет «колебаться». Однако перенос строк Flex выполняется повторно после свертывания, поэтому поперечный размер контейнера Flex с несколькими строками может измениться, а может и не измениться. — Свернутые элементы

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

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

Примечание: Используйте Firefox для двух приведенных ниже примеров, поскольку Chrome и Safari считают свертывание скрытым.

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

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

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

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

Разница между

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

Последнее изменение: 000Z»> 28 сентября 2022 г. , участниками MDN

flex-wrap | CSS-Tricks — CSS-Tricks

Свойство flex-wrap является подсвойством модуля Flexy Box Layout. Он определяет, будут ли гибкие элементы принудительно размещаться в одной строке или могут быть перенесены в несколько строк. Если установлено несколько строк, он также определяет поперечную ось, которая определяет направление укладки новых строк, способствуя адаптивному поведению макета без медиа-запросов CSS.

 .flex-контейнер {
  flex-wrap: обернуть;
} 

Напоминание: поперечная ось — это ось, перпендикулярная главной оси. Его направление зависит от направления главной оси.

Синтаксис

 flex-wrap: nowrap | обернуть | rab-reverse 

• Начальное значение: Nowrap
• Применяется к: Flex Containers
• Унаследовано: NO
• Compureted: AS №
• . .0100 дискретный

Значения

 flex-wrap: nowrap; /* Значение по умолчанию */
flex-wrap: обернуть;
flex-wrap: обернуть-обратно;
/* Глобальные значения */
flex-wrap: наследовать;
flex-wrap: начальный;
flex-wrap: вернуться;
flex-wrap: возвратный слой;
flex-wrap: не установлено; 

• nowrap (по умолчанию): однострочный, что может привести к переполнению контейнера0099 wrap-reverse : многострочных линий, противоположных направлению, определенному flex-direction

Demo

В следующей демонстрации:

• Красный список установлен на 905 04 yellow nowrap имеет значение wrap
• Синий список имеет значение wrap-reverse

Для flex-direction установлено значение по умолчанию: row .

Поддержка браузера

Desktop

Chrome	Firefox	IE	Edge	Safari
21*	28	11	12	6. 1*

Mobile / Tablet

Для получения дополнительной информации о том, как смешивать синтаксис для лучшей поддержки браузера, обратитесь к нашей статье «Использование Flexbox».

Фрагмент на 30 сентября 2022 г.

Полное руководство по Flexbox

Статья на 3 октября 2019 г.

Адаптивный макет фотографий с помощью Flexbox

Статья на 10 марта 2014 г.

Заполнение пространства в последней строке с помощью Flexbox

Статья на 17 ноября 2014 г.

Навигационная панель Flexbox с фиксированными, переменными элементами и элементами Take-Up-The-Rest

Статья на 22 ноября 2021 г.

Адаптивные макеты, меньше медиа-запросов

Статья на 19 февраля 2016 г.

Полезная техника Flexbox: обертывание смещения выравнивания

Другие ресурсы

• CSS Flexible Box Module Level 1 (W3C)
• flex-wrap (MDN)
• Повышение скорости отклика с помощью flex-wrap в CSS (DigitalOcean)3
3 Альманах на 15 октября 2021 г.

отображать

.element { display: inline-block; }

дисплей

Альманах на 28 июля 2021 г.

выравнивание содержимого

.element { align-content: space-around; }

выравнивание содержимого flexbox

Альманах на 28 сентября 2022 г.

выравнивание элементов

.element { align-items: flex-start; } Альманах на 4 августа 2021 г.

flex-направление

.element { flex-direction: column-reverse; } Альманах на 4 августа 2021 г.

гибкий поток

.element { flex-flow: перенос строки; } Альманах на 4 августа 2021 г.

гибкий рост

.flex-item { flex-grow: 2; }

Flexbox

Альманах на 4 августа 2021 г.

гибкая усадка

.element { flex-shrink: 2; }

CSS flex-wrap

<стиль> .внешний контейнер { высота: 200 пикселей; шрифт: 100 24px/100px без засечек; выравнивание текста: по центру; белый цвет; дисплей: гибкий; flex-wrap: обернуть; } .внешний контейнер div { высота: 50%; ширина: 50%; } .красный { фон: оранжево-красный; } .зеленый { фон: желто-зеленый; } .синий { фон: стальной синий; } <дел> <дел>1 <дел>2 <дел>3

Свойство CSS flex-wrap определяет, является ли flex-контейнер однострочным или многострочным (т. е. flex-элементы могут быть перенесены на несколько строк или принудительно размещены в одной строке). Вы также можете указать направление, в котором располагаются несколько строк.

Синтаксис

гибкая обертка: nowrap | обернуть | обертка-реверс

Возможные значения

сейчас

Гибкий контейнер является однострочным. Обертывание не допускается.

обертка

Гибкий контейнер является многострочным. Flex-элементы могут переноситься на новую строку.

обратная сторона

То же, что и wrap , за исключением того, что перекрестное начало и поперечное направление поменялись местами.

Кроме того, все свойства CSS также принимают следующие значения ключевых слов CSS в качестве единственного компонента значения их свойства:

начальный

Представляет значение, указанное как начальное значение свойства.

унаследовать

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

снято с охраны

Это значение действует как inherit или initial , в зависимости от того, унаследовано свойство или нет. Другими словами, он устанавливает для всех свойств их родительские значения, если они наследуемые, или их начальные значения, если они не наследуемые.

Основная информация о свойствах

Исходное значение

сейчас

Применяется к

Контейнеры Flex

Унаследовано?

Нет

СМИ

Визуальный

Вычисленное значение

Заданное значение

Анимируемый

Нет

Пример кода

Базовый CSS

.внешний-контейнер { дисплей: гибкий; flex-wrap: обернуть; }

Рабочий пример в документе HTML

<стиль> .внешний контейнер { высота: 200 пикселей; шрифт: 100 24px/100px без засечек; выравнивание текста: по центру; белый цвет; дисплей: гибкий; flex-wrap: обернуть; } .внешний контейнер div { высота: 50%; ширина: 50%; } .красный { фон: оранжево-красный; } .зеленый { фон: желто-зеленый; } .синий { фон: стальной синий; } <дел> <дел>1 <дел>2 <дел>3

Попробуйте

Спецификации CSS

• Свойство flex-wrap определено в модуле CSS Flexible Box Layout Level 1 (рекомендация кандидата W3C, 26 мая 2016 г. ).

О Flexbox

Flexbox относится к модулю Flexible Box Layout, представленному в CSS3. Гибкий контейнер — это элемент с дисплеем : flex или display: inline-flex .

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

Дополнительные сведения о гибких элементах см. в описании свойства flex .

Поддержка браузера

В следующей таблице, предоставленной Caniuse.com, показан уровень поддержки этой функции браузерами.

Префиксы поставщиков

Для максимальной совместимости с браузерами многие веб-разработчики добавляют свойства для конкретных браузеров, используя такие расширения, как -webkit- для Safari, Google Chrome и Opera (более новые версии), -ms- для Internet Explorer, -moz- для Firefox, -o- для более старых версий Opera и т. д. Как и в случае любого свойства CSS, если браузер не поддерживает проприетарное расширение, он просто проигнорирует его.

Эта практика не рекомендуется W3C, однако во многих случаях единственный способ протестировать свойство — включить расширение CSS, совместимое с вашим браузером.

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

Многие разработчики используют Autoprefixer, постпроцессор для CSS. Autoprefixer автоматически добавляет префиксы поставщиков в ваш CSS, поэтому вам это не нужно. Он также удаляет старые ненужные префиксы из вашего CSS.

Вы также можете использовать Autoprefixer с такими препроцессорами, как Less и Sass.

Переливная упаковка в контейнере Flex

В этом блоге мы рассмотрим очень конкретную вещь, т. е. использование свойства overflow-wrap внутри гибкого контейнера. overflow-wrap — очень удобное свойство CSS, и я использовал его почти во всех проектах, над которыми работал. не будет обертываться по умолчанию. Но давайте рассмотрим это на примере.

В приведенном выше примере мы сосредоточимся только на следующем фрагменте, все остальное предназначено только для стилизации.


 <дел>
  

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