От автора: создание липкого футера является одной из самых распространенных задач веб-разработки, которую вы легко можете решить с помощью flexbox. Без липкого футера, если у вас недостаточно содержимого на странице, футер «подпрыгивает» до середины экрана, что может полностью испортить взаимодействие с пользователем. До появления flexbox разработчики использовали отрицательные поля, чтобы заставить нижний колонтитул опускаться до нижней части страницы. К счастью, ...
Читать далее »Архив меток: flexbox
2 способа создать макет Святого Грааля с Flexbox
От автора: до появления Модуля макетов flexbox было непросто создать макет Святого Грааля. Нам приходилось использовать всевозможные настройки, чтобы добиться такого вида макета, который понравился бы как маркетологам, так и владельцам веб-сайтов, чтобы он позволял использовать две боковые панели одновременно — одну слева и одну справа. Благодаря flexbox, теперь мы можем создать его всего с помощью нескольких строк кода. Итак, ...
Читать далее »Соображения в основе макета Flexbox
От автора: мне просто нужно разместить два блока рядом, и я слышу, что flexbox хорош в таких вещах. Просто добавление display: flex; к родительскому элементу укладывает его потомком в ряд Ну, это круто. Полагаю, я мог использовать float, но это проще. Они, вероятно, должны занять все доступное пространство. Могу ли я просто растянуть родителя на 100% ширины? Ну, я ...
Читать далее »Естественно адаптивная сетка 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. Что-то вроде того. Проблема этого подхода заключается в том, что он создает сетку с визуально перетасованным и непонятным порядком. Элементы будут (без ведома пользователя) отображаться сверху вниз, и ...
Читать далее »