Главная » Архив меток: flexbox

Архив меток: flexbox

Естественно адаптивная сетка CSS с помощью minmax() и min()

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

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

Как добавить резервный Flexbox вариант для CSS Grid

От автора: в предыдущей статье я рассказал о том, как с помощью CSS Grid создать календарь. Сегодня я хочу поделиться тем, как создать для CSS Grid резервный Flexbox вариант для того же календаря. Как обеспечить поддержку В целом, есть три способа обеспечить поддержку, когда дело доходит до CSS. Первый способ: написать резервный код. Переопределить резервный код. .selector { property: fallback-value; ...

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

Flexbox и отступы: примеры работы

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

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

Flexbox justify-content: полное руководство по центрированию

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

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

Перенос на новую строку с помощью flexbox

От автора: вот проблема: если вы хотите создать макет с несколькими строками элементов, как вы можете контролировать во flexbox перенос элементов на новую строку? Предположим, вы хотите создать макет, который выглядит примерно так, с чередующимися строками из трех элементов и одним элементом на всю ширину: Распространенным способом управления позиционированием и размером flex-элементов является использование width или flex-basic; если мы установим ...

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

Вам просто нужно знать эти свойства, чтобы полюбить CSS

От автора: позиционирование CSS и HTML может быть настоящей головной болью, когда вы новичок в разработке веб-интерфейса. Но в этом посте я собираюсь научить вас тому, как решить большинство проблем позиционирования. Вам нужно знать только эти 3 свойства CSS. Я разработчик с более чем 3-летним опытом работы. Когда я учился, я думал то же, что думаете сейчас вы. Потом я ...

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

CSS masonry с помощью flexbox, :nth-child() и order

От автора: на первый взгляд создать макет masonry с помощью flexbox довольно просто; все, что вам нужно сделать, это установить для flex-flow — column wrap, и вуаля, у вас есть макет masonry. Что-то вроде того. Проблема этого подхода заключается в том, что он создает сетку с визуально перетасованным и непонятным порядком. Элементы будут (без ведома пользователя) отображаться сверху вниз, и ...

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

В чем разница между Flexbox и Grid CSS?

От автора: давайте вкратце рассмотрим эту тему и попытаемся ответить без длинных объяснений. Существует много общего между Flexbox и Grid CSS, начиная с того, что они используются для разметки и являются гораздо более мощными, чем любая техника разметки, которая была до них. Они могут растягиваться и сжиматься, они могут центрировать вещи, они могут переупорядочивать вещи, они могут выравнивать вещи… Существует ...

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

Полное руководство по свойствам размеров Flexbox

От автора: изменение размеров Flexbox позволяет создавать гибкие макеты, которые полностью адаптируются к экрану. Если вы все настроите правильно, вам не придется полагаться на медиа-запросы для поддержки разных экранов, окон просмотра и ориентаций. В этом руководстве я покажу вам, как использовать свойства Flexbox для изменения размеров: flex-grow, flex-shrink, flex-basis и flex. Заполнение свободного пространства Одним из наиболее сложных аспектов написания ...

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

Создание гибких макетов с помощью Flexbox CSS

От автора: до появления CSS Grid был Flexbox (который официально известен как CSS Flexible Box Layout Module). Flexbox был разработан для управления макетом в одном направлении — строке (flex-direction: row или row-reverse) или столбце (flex-direction: column или column-reverse). Это контрастирует с сеткой, которая учитывает строки и столбцы. Базовый гибкий макет создать просто: добавьте для родительского элемента display: flex или display: ...

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