Флекс лайн: Flexline — Car Molding Professional Manufacturer

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

Создание вещей обернуть

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

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

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

Упаковка и изгиб-направление

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

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

Объяснение одномерной компоновки

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

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

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

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

Как работают сеточные системы на основе flexbox?

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

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

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

Создание желобов между элементами

При упаковке гибких предметов, вероятно, возникнет необходимость их разнести. В настоящее время у нас нет никаких реализаций свойств промежутка от модуля Выравнивания Коробки для Flexbox. В будущем мы сможем просто использовать с разрывом строки и с разрывом столбца для flexbox, как мы это делаем для CSS Grid. В настоящее время вам нужно будет использовать поля для достижения этой цели.

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

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

Свернутые предметы

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

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

Это поведение полезно, если вы хотите нацеливать flex-элементы, используя JavaScript, например, чтобы показать и скрыть контент. Пример в спецификации демонстрирует один такой шаблон.

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

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

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

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

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

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

Разница между видимостью : скрыто и дисплей: нет

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

Перерыв на новый ряд с flexbox

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

Распространенным способом управления позиционированием и размером гибких элементов является использование ширины или flex-based ; если мы установим четвертый элемент шириной 100%, он будет размещен в отдельной строке.Но что, если мы не хотим или не можем установить ширину отдельных элементов, нам действительно нужно? Или есть способ просто указать flexbox на разрыв строки в определенных точках?

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

  / * Вставка этого свернутого ряда между двумя элементами Flex сделает
 * гибкий элемент, который появляется после разрыва новой строки * /
,перерыв {
  гибкая основа: 100%;
  высота: 0;
}
  

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

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

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

  

  
 
  
 
  
 
  ...

  

Вставка разрывающего элемента в изгибе

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

Давайте начнем с простого примера.Скажем, у нас есть два элемента, показанные рядом (они настроены на рост с flex-grow: 1 , и у них нет определенной ширины или flex-based ):

Мы можем вставить элемент разрыва строки между элементами, чтобы они оба заняли 100% доступного пространства:

  
 ... 
  
 ... 
  

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

Как это работает? Поскольку мы говорили, что .break должен занимать 100% ширины контейнера (поскольку мы установили flex-base: 100% ), для достижения этого необходимо, чтобы ломающийся элемент flex располагался в своем собственном ряду. Он не может поделиться строкой с первым элементом, поэтому он перейдет к новой строке, в результате чего первый элемент останется один в одной строке. Первый элемент будет увеличиваться, чтобы заполнить оставшееся пространство (поскольку мы установили flex-grow: 1 ).Та же логика применима ко второму пункту.

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

  
 ... 
 ... 
 ... 
  
 ... 
  
 ... 
 ... 
 ... 
  

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

Опять же, нам не нужно было указывать ширину ни одного из этих элементов. Тот же метод будет работать для столбцов, если у нас есть гибкий контейнер с направлением изгиба : столбец и для ширины (а не высота ) для нашего разрушающего элемента 0 :

  / * Используйте свернутый столбец, чтобы перейти к новому столбцу * /
.break-column {
  гибкая основа: 100%;
  ширина: