Здравствуйте! Сегодня в продолжении темы верстки страницы я хотел бы рассказать о FlexBox. Модуль Flexbox-верстки (flexible box - «гибкий блок», на данный момент W3C Candidate Recommendation) ставит задачу предложить более эффективный способ верстки, выравнивания и распределения свободного места между элементами в контейнере, даже когда их размер неизвестен и / или динамический (отсюда слово «гибкий»).
Главная задумка flex-верстки в наделении контейнера способностью изменять ширину / высоту (и порядок) своих элементов для лучшего заполнения пространства (в большинстве случаев - для поддержки всех видов дисплеев и размеров экранов). Flex-контейнер растягивает элементы для заполнения свободного места или сжимает их, чтобы предотвратить выход за границы.
Самое важное, flexbox-верстка не зависит от направления в отличие от обычных лейаутов (блоки, располагаются вертикально, и инлайн-элементы, расположенные горизонтально). В то время, как обычный лэйаута отлично подходит для веб-страниц, ему не хватает гибкости для поддержки крупных или сложных приложений (особенно когда дело доходит до изменения ориентации экрана, изменения размера, растяжения, сжатия и т.п.).
Т.к. flexbox - это целый модуль, а не просто единичное свойство, он объединяет в себе множество свойств. Некоторые из них должны применяться к контейнеру (родительского элемента, так называемом flex-контейнера), в то время как другие свойства применяются к дочерним элементам, или flex-элементам.
Если обычный макет основывается на направлениях потоков блочных и инлайн-элементов, то flex-макет основывается на «направлениях flex-потока».
Flexbox
В основном элементы будут распределяться или вдоль главной оси (от main-start в main-end), или вдоль поперечной оси (от cross-start в cross-end).
main-axis - главная ось, вдоль которого располагаются flex-элементы. Обратите внимание, она обязательно должна быть горизонтальной, все зависит от качества justify-content.
main-start | main-end - flex-элементы размещаются в контейнере от позиции main-start позиции main-end.
main size - ширина или высота flex-элемента в зависимости от выбранной основной величины. Основная величина может быть либо шириной, или высотой элемента.
cross axis - поперечная ось, перпендикулярная главной. Ее направление зависит о тнаправления главной оси.
cross-start | cross-end - flex-строки заполняются элементами и размещаются в контейнере от позиции cross-start и позиции cross-end.
cross size - ширина или высота flex-элемента в зависимости от выбранной размерности равна этой величине. Это свойство совпадает с width или height элемента в зависимости от выбранной размерности.
Это интересно
0
|
|||
Последние откомментированные темы:
-
Лучший чат-бот с искусственным интеллектом - какой из них вам подходит?
(1)
boris 1
,
13.01.2022
-
Новогоднее украшение рабочего стола ПК
(1)
Елена2022
,
21.12.2021
-
Как JPG преобразовать в Word с распознаванием текста
(1)
Olejaweb
,
13.11.2021
-
Как вернуть классическое ленточное меню в проводник Windows 11
(1)
Сергей Михайлов сын
,
26.10.2021
20250313222643