Здравствуйте! Сегодня в продолжении темы верстки страницы я хотел бы рассказать о FlexBox. Модуль Flexbox-верстки (flexible box - «гибкий блок», на данный момент W3C Candidate Recommendation) ставит задачу предложить более эффективный способ верстки, выравнивания и распределения свободного места между элементами в контейнере, даже когда их размер неизвестен и / или динамический (отсюда слово «гибкий»).
Главная задумка flex-верстки в наделении контейнера способностью изменять ширину / высоту (и порядок) своих элементов для лучшего заполнения пространства (в большинстве случаев - для поддержки всех видов дисплеев и размеров экранов). Flex-контейнер растягивает элементы для заполнения свободного места или сжимает их, чтобы предотвратить выход за границы.
Самое важное, flexbox-верстка не зависит от направления в отличие от обычных лейаутов (блоки, располагаются вертикально, и инлайн-элементы, расположенные горизонтально). В то время, как обычный лэйаута отлично подходит для веб-страниц, ему не хватает гибкости для поддержки крупных или сложных приложений (особенно когда дело доходит до изменения ориентации экрана, изменения размера, растяжения, сжатия и т.п.).
Т.к. flexbox - это целый модуль, а не просто единичное свойство, он объединяет в себе множество свойств. Некоторые из них должны применяться к контейнеру (родительского элемента, так называемом flex-контейнера), в то время как другие свойства применяются к дочерним элементам, или flex-элементам.
Если обычный макет основывается на направлениях потоков блочных и инлайн-элементов, то flex-макет основывается на «направлениях flex-потока». Читать далее
Это интересно
0
|
|||
Последние откомментированные темы:
-
Word онлайн бесплатно
(1)
master284
,
04.05.2019
-
Ключевые слова и их связь с запросами
(1)
master284
,
04.05.2019
-
Как скачать Киностудию Windows (Windows Movie Maker) для Windows 10, Windows 8, Windows 7
(4)
Horov
,
23.07.2018
-
Как сделать кнопку своими руками
(1)
master284
,
29.12.2017
-
Какие существуют поисковые системы кроме Yandex и Google?
(1)
Словесник
,
21.12.2016
-
TP-Link TL-WR740N - настройка маршрутизатора
(2)
Sugrob
,
22.10.2016
20260113175345