Шпаргалка по всем свойствам CSS Flexbox
Рассмотрели основы CSS Flexbox и объяснили, как работает каждое из свойств Flexbox. Внутри статьи — шпаргалки с котиками.
15К открытий20К показов
В этой статье мы рассмотрим основы CSS Flexbox, чтобы вы могли создавать адаптивные сайты.
Объясним, как работает каждое из свойств Flexbox, и дадим вам шпаргалку к каждому свойству. В шпаргалках описано всё, что можно сделать с помощью Flexbox.
Это — перевод оригинальной статьи на freeCodeCamp от автора Joy Shaheb.
Ещё у нас есть видеоверсия урока от автора (осторожно, английский язык):
Что такое Flexbox
Когда вы строите дом, вам нужен чертеж. Точно такой же чертеж нам понадобится для создания веб-сайтов. И Flexbox – это тот самый чертеж.
Flexbox позволяет нам компоновать между собой содержимое нашего сайта. Ещё она помогает создавать адаптивные структуры для веб-сайтов под различные устройства.
Вот демо-визитка, написанная на Flexbox в качестве чертежа.
Архитектура Flexbox
Как же работает архитектура Flexbox? Контентные flex-элементы распределяются вдоль главной оси и поперечной оси, как в системе координат.
И, в зависимости от значений flex-direction, положение блоков меняется между строками и колонками.
Список свойств Flexbox
Этот список содержит все возможные свойства и значения, которые вы можете использовать при работе с Flexbox.
Вы можете использовать список при выполнении проектов и экспериментировать с различными значениями.
Создаём проект
Чтобы создать проект с Flexbox, нужно немного знать HTML, CSS и работу с VS-кодом. Вот, что вам нужно сделать:
- Создайте папку с именем “Project-1” и откройте VS Code.
- Создайте файлы index.html и style.css.
- Установите Live Server и запустите его.
Или вы можете просто открыть Codepen и начать кодить.
HTML
В HTML напишите эти строки кода внутри тега body
CSS
Создайте класс .container
и укажите в нём поля. Затем оформите блоки так, чтобы все они выглядели одинаково, как в примере ниже. ????
Примечание: не забудьте указать высоту контейнера.
Также, прежде чем начать, необходимо понять отношения между родительскими и дочерними классами.
Flexbox работает только с родительским классом, но не с дочерними классами.
Здесь класс .container
является родительским, а классы .box-*
– дочерними.
Поэтому примените display: flex
внутри класса .container
. Расположите текст по центру блока.
И… все готово! Теперь мы готовы кодить. ????
Свойство flex-direction
Это свойство позволяет нам задавать направление и ориентацию, согласно которым flex-элементы должны располагаться внутри flex-контейнера.
Чтобы у нас получилось то же самое, что и на картинке с котиками, нужно написать такой CSS-код.
Обратите внимание, что мы пишем код внутри класса .container
.
Свойство justify-content
Это свойство выстраивает flex-элементы вдоль главной оси внутри flex-контейнера.
Попробуйте воссоздать это с помощью этого кода CSS:
Свойство align-content
Это свойство выравнивает flex-элементы по поперечной оси внутри flex-контейнера. Оно аналогично свойству justify-content, которое мы рассматривали только что. Разница только в осях выравнивания.
Обратите внимание, что без flex-wrap
это свойство не работает. Вот, что должно быть в вашем коде:
Свойство align-items
Это свойство распределяет Flex-элементы вдоль поперечной оси.
Чтобы протестировать свойство, напишем следующий код в CSS:
Свойство align-self
Это свойство работает с дочерними классами. Оно позиционирует выбранный элемент вдоль поперечной оси.
Всего есть 6 значений align-self
:
- flex-start;
- flex-end;
- center;
- baseline;
- stretch;
- auto.
Чтобы воссоздать результат, выберите любой .box-*
и напишите следующий код:
Свойства flex-grow, shrink, wrap и basis
Свойства, которые мы сейчас обсудим, будут работать при изменении размера окна. Давайте приступим.
Flex-grow
Это свойство увеличивает размер flex-элемента на основе ширины flex-контейнера.
Flex-shrink
Это свойство уменьшает flex-элемент в зависимости от ширины flex-контейнера. Оно противоположно flex-grow
.
Обратите внимание, что flex-grow
и flex-shrink
работают на дочерних классах. Поэтому мы изменим все наши блоки следующим образом:
Поиграйтесь с размером окна браузера, и вы увидите результат.
Теперь используем flex-shrink
.
Обратите внимание, что сначала нужно удалить свойство flex-wrap
, иначе flex-shrink
не будет работать.
Измените размер окна, и вы увидите результат.
Flex-wrap
Это свойство помогает установить количество flex-элементов в строке или в колонке.
Свойство работает в родительском классе .container
. Итак, напишите код:
Flex-basis
Свойство похоже на добавление ширины к flex-элементу, но работает более гибко.
К примеру, flex-basis: 10em
установит начальный размер flex-элемента равным 10em
. Его конечный размер будет основан на доступном пространстве, на данных flex-grow
и flex-shrink
.
Как читать сокращения свойств Flexbox
Сокращение flex
Вот, как могут быть одновременно указаны свойства flex-grow
, flex-shrink
и flex-basis
вместе взятые.
Попробуйте понять сокращение, написав следующий код.
Обратите внимание, что он работает только для дочерних классов.
Сокращение flex-flow
Это сокращение для свойств flex-direction
и flex-wrap
.
Напишите следующий код, который работает в родительском классе:
Сокращение place-content
Это сокращение для свойств justify-content
и align-content
.
Обратите внимание, что оно работает в родительском классе.
Если вы дочитали до конца, вам полагается большущая медаль. <3
Пишите в комментариях, интересны ли вам статьи по CSS и на какие темы. Нам будет приятно знать, что тема востребована.
15К открытий20К показов