Что такое CSS Flexbox?
CSS Flexbox - CSS Flexbox - это новый модуль макета в CSS 3. Он называется гибким блоком, потому что он может создавать гибкий и отзывчивый контейнер с небольшими контейнерами внутри. CSS Flexbox позволяет очень легко создать адаптивный макет без особых мозговых штурмов. Раньше веб-дизайнерам приходилось использовать числа с плавающей запятой для выравнивания блоков div, что не относится к CSS Flexbox .
Чтобы начать с flexbox, вам просто нужно добавить одно свойство
display:flex;
в родительский элемент, и все его дочерние элементы начнут вести себя как гибкие элементы.
Преимущества flexbox:
У флексбокса много преимуществ, и то, как они его используют, зависит от дизайнера. Ниже приведены некоторые из основных функций flexbox, посмотрите:
- Помогает в создании адаптивного и гибкого дизайна с медиа-запросами.
- Можно выровнять элементы блока по горизонтали без использования поплавков.
- Flexbox может легко распределять пространство вокруг гибких элементов, чтобы улучшить внешний вид веб-сайта.
- Он может заказывать гибкие элементы любым способом.
- Укажите скорость увеличения и уменьшения гибкого элемента во время изменений в области просмотра.
Терминология, относящаяся к Flex-box
- Главная ось: это горизонтальная ось слева направо. Левый конец - это начало, а правый конец - это конец.
- Поперечная ось: это вертикальная ось сверху вниз. Верхний конец - это начало, а нижний конец - это конец.
- Гибкий контейнер: это контейнер, в котором будут размещаться все маленькие контейнеры (дочерние контейнеры). К этому контейнеру применяется большинство свойств гибкости.
- Flex-Items: это дочерние контейнеры, которые будут находиться внутри Flex-контейнера.
Как пользоваться Flexbox?
Мы объясним flexbox на очень простом языке. Первое, что вы должны знать, что для использования CSS Flex необходимо создать контейнер Flex (родительский контейнер), в котором будут размещаться некоторые контейнеры Flex (дочерние контейнеры). CSS Flexbox имеет разные свойства как для родительского, так и для дочернего контейнеров.
Нажмите «Далее», чтобы узнать о гибких контейнерах и их свойствах.