Руководство веб-дизайнера по Flexbox

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

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

В этой статье я познакомлю вас с фундаментальными концепциями flexbox. Понимание этих основных концепций откроет целый мир чрезвычайно гибких и простых в создании макетов (особенно для

адаптивный веб-дизайн).

Дизайн нового поколения

Flexbox — это инструмент нового поколения, который поможет вам создавать макеты с помощью CSS; хотите ли вы разместить раздел своего веб-сайта или отобразить сетку медиа-элементов. Он позволяет вам легко выравнивать, центрировать, выравнивать, масштабировать и изменять порядок элементов на вашей странице, не прибегая к неприятным CSS-хакам или хрупким зависимостям JavaScript.

Flexbox может заменить плавающие элементы, трюки с позиционированием, макеты встроенных блоков и даже – к ужасу – макеты отображения таблиц. Если вы когда-нибудь задавались вопросом, почему некоторые, казалось бы, простые макеты в CSS оказались трудными или даже невозможными, вам понравится Flexbox.

Гибкие элементы

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

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

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

Строки и столбцы

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

По умолчанию Flexbox настроен с гибкое направление: строка; это означает, что элементы располагаются по главной оси слева направо, подряд. Мы можем переключить главную ось, чтобы она текла справа налево, используя flex-direction: строка-обратная (как показано выше).

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

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

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

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

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

Поперечная ось

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

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

Выравнивание по главной оси

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

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

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

Выровнять несколько строк

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

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

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

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

.container {
align-items: center; justify-content: center; align-content: center; flex-wrap: wrap; }

Заполните пространство

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

Другая часто неправильно понимаемая часть flexbox — как работать со значениями роста, сжатия и базиса. Полезно еще раз отбросить любые идеи идеальных по пикселям сеток и принять тот факт, что flexbox, ну, в общем, гибок.

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

Мне нравится думать об этих свойствах как:

• гибкий рост: Как мне действовать, если появилось дополнительное место? Как гибкие элементы будут распределять оставшееся пространство?
• гибкая термоусадка: Как мне действовать, если для всех гибких элементов недостаточно места? Кто откажется от части себя, чтобы все было в порядке, вместо того, чтобы переполнить контейнер?
• гибкая основа: Вместо того, чтобы устанавливать определенную ширину или высоту для вашего элемента, в идеале, какой будет ширина (как строка) или высота (как столбец)?

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

Растет и сокращается

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

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

Допустим, у нас есть два гибких элемента: видео и титры. Мы установим видео на гибкий: 1 1 700 пикселей; и кредиты гибкий: 3 3 300 пикселей;. Теперь родителем обоих этих элементов является гибкий контейнер, и когда его ширина составляет 1000 пикселей, все работает идеально: видео занимает 700 пикселей, а титры — остальные 300 пикселей.

Что произойдет, если ширина гибкого контейнера составит 1500 пикселей? У нас есть дополнительные 500 пикселей для работы, так куда же они деваются? Вот где гибкий рост удары в. Для видео установлено значение 1, а для кредитов — 3. Это означает, что из всего дополнительного места титры займут в три раза (375 пикселей) больше места, которое получит видео (125 пикселей).

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

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

Неизвестный размер навигации

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

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

Давайте посмотрим на этот часто встречающийся код в качестве примера:

Home
About
Contact

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

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

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

Колонны одинаковой высоты

Вы когда-нибудь хотели, чтобы в CSS было свойство height: as-high-as-the-highest-sibling? Мы все были там – у нас есть три столбца контента, все разного размера (см. выше). Содержимое является динамическим, а сайт отзывчивым, поэтому об установке фиксированной высоты для каждого из них не может быть и речи, а исправление JavaScript не является идеальным.

Ранее мы узнали, что значением по умолчанию для align-items является растяжение. Это означает, что гибкие элементы будут растягиваться, чтобы соответствовать родительскому гибкому контейнеру. А как определяется высота гибкого контейнера? Почти всегда по высоте самого высокого блока с содержимым.

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

I'm short
I'm a pretty tall box that is the biggest
I'm a medium sized box

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

.container {
display: flex; } .box {
flex: 1 1 33.33%; }

Преимущества флексбокса

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

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

Необходимые ресурсы

Что за флексбокс?!

«Что за флексбокс?!» — это бесплатный обучающий курс из 20 видео, который я создал. В первой половине курса каждое видео знакомит с новым аспектом Flexbox. Я сделал их красивыми и краткими, чтобы вы могли обратиться к ним позже, когда вам понадобится освежить в памяти определенную часть. Вторая половина курса посвящена реальному примеру, подробно описывающему, как мы можем использовать Flexbox для быстрого и легкого решения многих распространенных проблем с макетом, с которыми мы сталкиваемся.

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

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

Флексбаги

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

Читать далее:

• Создайте анимированный загрузочный экран с разделенным экраном.
• 10 способов изменить свое творческое мышление
• Создание и анимация многоугольников SVG