Wrap flex css: flex-wrap — CSS | MDN

• Руководство CSS Flexbox: Основные понятия Flexbox
• Руководство по CSS Flexbox: Освоение упаковки гибких элементов

Обнаружили проблему с содержанием этой страницы?

• Отредактируйте страницу на GitHub.
• Сообщить о проблеме с содержимым.
• Просмотрите исходный код на GitHub.

Хотите принять участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена 21 февраля 2023 г. участниками MDN.

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

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

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

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

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

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

Свойство gap в CSS является сокращением для row-gap и column-gap , определяя размер промежутков, который представляет собой пространство между строками и столбцами в сеточных, гибких и многоколоночных макетах.

Во Flexbox свойство gap применяется к контейнеру flex. Он создает фиксированное пространство между соседними гибкими элементами. Однако свойство gap — не единственное, что может помещать пробелы между элементами. Поля, отступы, justify-content и align-content также могут увеличить размер отступа, влияя на фактический размер зазора.

Чтобы увидеть, как свойство gap отличается от свойства margin по обеим осям, попробуйте добавить gap в контейнер .box и изменить значение margin на . box > * flex-элементов.

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

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

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

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

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

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

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

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

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

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

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