Flex css равная высота колонок

причина, по которой поле #5 не совпадает с полем #2 при добавлении содержимого, заключается в том, что каждый из этих ящиков существует в другом контекст форматирования flex. Другими словами, коробки существуют в различных контейнерах flex.

в частности, коробки #1, #2 и #3 являются гибкими элементами #quadr-col-1 , и коробки #4, #5 и #6 детали гибкого трубопровода из #quadr-col-2 . Оба!—3—> и #quadr-col-2 являются элементами flex основного контейнера flex, которые удваиваются как (вложенные) контейнеры flex.

потому что эти коробки существуют в отдельных контейнерах гибкого трубопровода никакая причина для их делить равную высоту. Если вы хотите применить функцию Flex equal height, поместите их все в один контейнер flex.

Источник

Одинаковые столбцы с помощью Flexbox: это сложнее, чем вы думаете

Дата публикации: 2021-07-08

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

Вы проходите через hero-раздел и приступаете к работе над разделом из трех столбцов. Пора вспомнить о нашем ненадежном товарище flexbox! Однако, вы пишете display:flex и получаете беспорядок вместо ожидаемых трех одинаковых столбцов.

CodePen Embed Fallback

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Я уверен, что вы видели примеры и учебные пособия, в которых рассматривается что-то вроде того, где три div сжимаются вокруг содержимого, внутри них:

CodePen Embed Fallback

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

Подождите, почему? Flex по умолчанию сжимает объекты — такого не может быть! Верно?

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

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

Погружение в max-content

max-content — довольно удобное свойство в определенных ситуациях, но мы хотим понять, как оно работает в данной конкретной ситуации, когда мы пытаемся получить три равных столбца. Итак, давайте на мгновение отбросим flexbox и посмотрим, как max-content работает сам по себе.

MDN хорошо объясняет это: Ключевое слово max-content представляет внутреннюю ширину максимального содержания. Для текстового содержимого это означает, что содержимое вообще не будет переноситься, даже если оно вызывает переполнение.

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

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

CodePen Embed Fallback

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

Взгляните на эти элементы без flexbox, но вместо этого со свойством width:max-content:

CodePen Embed Fallback

Итак, когда текстов очень мало, сжимает элементы внутренняя функция max-content, а не flex-shrink. Конечно, flexbox также имеет поведение по умолчанию flex-direction:row, которое превращает flex-элементы в столбцы, помещая их рядом друг с другом. Вот еще один пример, но с выделенным свободным пространством.

CodePen Embed Fallback

Добавление flex-shrink

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

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

Но если flex-элементы действительно переполняют контейнер (благодаря внутренней ширине max-content), flex-элементы могут сжиматься, чтобы предотвратить это переполнение, потому что flex-shrink это отслеживает.

CodePen Embed Fallback

Вот почему по умолчанию для flex-shrink установлено значение 1. Без него все очень быстро запуталось бы.

Вот почему столбцы не равны

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

Используя DevTools Firefox (у него есть несколько уникальных визуализаций flexbox, которых нет у других браузерах), мы можем увидеть, как flexbox вычисляет значения.

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

В приведенном ниже CodePen у нас есть родительский элемент, представляющий собой контейнер (display:flex) шириной 600px. Я удалил все, что могло повлиять на цифры, так что нет gap или padding. Я также отключил border, чтобы мы могли легко визуализировать результат.

CodePen Embed Fallback

Первый и третий flex-элементы имеют width:300px а средний — width:600px. Если мы сложим все это, всего получится 1200px. Это больше, чем доступно в родительском элементе 600px, поэтому начинает работать flex-shrink.

Flex-shrink это соотношение. Если все элементы имеют одинаковый flex-shrink (по умолчанию равный 1), они сжимаются с одинаковым соотношением. Это не означает, что все они сжимаются до одного и того же размера или на одинаковую величину, но все они сжимаются с одинаковым соотношением.

Если мы вернемся в Firefox DevTools, мы увидим базовый размер flex-shrinkа и окончательный размер. В данном случае два 300px элемента сейчас имеют ширину 150px, а один 600px — сейчас равен 300px.

Если мы сложим базовые размеры всех трех flex-элементов (фактическую ширину, которую мы для них объявили), общая сумма будет равна 1200px. Ширина нашего flex-контейнера равна 600px. Если разделить все на 2, все сходится! Все элементы уменьшаются с одинаковым соотношением, и их ширина делится на 2.

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

Уравнивание столбцов

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

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

Метод 1: Использование flex:1

Один из способов добиться того, чтобы все flex-элементы имели одинаковый базовый размер, — это объявить для всех flex:1:

На своих лекциях я использовал другой подход, и у меня, должно быть, было 100 человек, которые спрашивали, почему я не использую flex:1 вместо этого. Я ответил, что не хочу углубляться в flex-стенографию. Затем я использовал новую демонстрацию с flex:1 и, к моему удивлению, это не сработало. Столбцы не были равны.

CodePen Embed Fallback

Средний столбец здесь больше двух других. Так почему же это не сработало? Виной всему свойство компонента padding в среднем столбце.

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

Когда я впервые увидел эту всплывающую проблему, мне захотелось узнать, что на самом деле происходит. Сокращенная flex делает больше, чем просто установает flex-grow:1. Если вы ещё не знаете, flex это сокращение flex-grow, flex-shrink и flex-basis. Значения по умолчанию для этих составляющих свойств:

Я не собираюсь углубляться в flex-basis в данной статье. На данный момент мы можем думать об этом как о width, для упрощения, поскольку мы не работаем с flex-direction.

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

если они переполняют родительский элемент, они могут сжиматся;

их ширина действует как max-content.

Собирая все вместе, flex по умолчанию:

Самое интересное в flex сокращении — это то, что вы можете опускать значения. Так что, когда мы объявляем flex:1, это установка первого значения, flex-grow равным 1.

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

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

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

CodePen Embed Fallback

Но если у нас есть три div с неравной шириной — как те, с которых мы начали, — добавление flex-grow к ним вообще ничего не даст. Они не будут расти, потому что они уже занимают все доступное пространство – и на самом деле, их нужно сжать с помощью flex-shrink, чтобы они уместились!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

CodePen Embed Fallback

Когда мы объявляем, что flex:1 это работает, потому что это не только устанавливает значение flex-grow равным 1, но также изменяет значение flex-basis!

Настройка flex:1 устанавливает flex-basis значение 0%. Это перезаписывает тот внутренний размер, который у нас был до того, как мы вели max-content. Все наши flex- элементы теперь хотят иметь базовый размер 0!

Глядя на расширенное представление flex:1 в DevTools, мы видим, что значение flex-basis изменилось на 0

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

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

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

Но, как мы видели, это не всегда так …

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

И нет, я не забыл * .