CSS свойство флексбокс (Flexbox) - Создание адаптивных сайтов - httpdoc.ru

Что такое CSS Flexbox?

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

Чтобы начать с flexbox, вам просто нужно добавить одно свойство display:flex; в родительский элемент, и все его дочерние элементы начнут вести себя как гибкие элементы.


Преимущества flexbox:

У флексбокса много преимуществ, и то, как они его используют, зависит от дизайнера. Ниже приведены некоторые из основных функций flexbox, посмотрите:

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

Терминология, относящаяся к Flex-box

CSS-Flexbox-контейнер
  • Главная ось: это горизонтальная ось слева направо. Левый конец - это начало, а правый конец - это конец.
  • Поперечная ось: это вертикальная ось сверху вниз. Верхний конец - это начало, а нижний конец - это конец.
  • Гибкий контейнер: это контейнер, в котором будут размещаться все маленькие контейнеры (дочерние контейнеры). К этому контейнеру применяется большинство свойств гибкости.
  • Flex-Items: это дочерние контейнеры, которые будут находиться внутри Flex-контейнера.

Как пользоваться Flexbox?

Мы объясним flexbox на очень простом языке. Первое, что вы должны знать, что для использования CSS Flex необходимо создать контейнер Flex (родительский контейнер), в котором будут размещаться некоторые контейнеры Flex (дочерние контейнеры). CSS Flexbox имеет разные свойства как для родительского, так и для дочернего контейнеров.

Нажмите «Далее», чтобы узнать о гибких контейнерах и их свойствах.