Поскольку flexbox - это целый модуль, а не отдельное свойство, он включает в себя множество вещей, включая весь его набор свойств. Некоторые из них предназначены для установки в контейнере (родительский элемент, известный как “гибкий контейнер”), тогда как другие предназначены для установки в дочерних элементах (упомянутые “гибкие элементы”).
Если "обычная” компоновка основана как на блочных, так и на встроенных направлениях потока, то гибкая компоновка основана на “направлениях гибкого потока”. Пожалуйста, взгляните на этот рисунок из спецификации, объясняющий основную идею, лежащую в основе гибкой компоновки.
Элементы будут располагаться либо по главной оси (от начала до конца), либо по поперечной оси (от начала до конца).
main axis – Главная ось контейнера flex - это основная ось, вдоль которой размещаются элементы flex. Обратите внимание, она не обязательно горизонтальна; это зависит от свойства flex-direction (см. Ниже).
main-start | main-end - элементы flex размещаются внутри контейнера, начиная с main-start и заканчивая main-end.
main size – ширина или высота контейнера flex, в зависимости от того, что находится в основном измерении, является основным размером контейнера. Основным свойством размера элемента flex является свойство ‘width’ или ‘height’, в зависимости от того, что находится в основном размере.
cross axis – ось, перпендикулярная главной оси, называется поперечной осью. Его направление зависит от направления главной оси.
cross-start | cross-end – Flex заполняются предметами и помещаются в контейнер, начиная со стороны cross-start гибкого контейнера и направляясь к стороне cross-end.
cross size – ширина или высота элемента flex, в зависимости от того, что находится в поперечном измерении, является поперечным размером элемента. Свойство cross size зависит от ‘width’ или ‘height’, которые находятся в поперечном измерении.