C ascading S tyle S heets (CSS) — это простой язык проектирования, предназначенный для упрощения процесса придания веб-страниц презентабельности. CSS обрабатывает внешний вид веб-страницы.
Используя CSS, вы можете управлять цветом текста, стилем шрифтов, расстоянием между абзацами, размерами и расположением столбцов, используемыми фоновыми изображениями или цветами, макетами, вариантами отображения для разных устройств и размерами экрана. а также множество других эффектов.
Чтобы определить положение и размеры блоков, в CSS вы можете использовать один из доступных режимов макета —
-
Макет блока — этот режим используется при оформлении документов.
-
Встроенный макет — этот режим используется при размещении текста.
-
Расположение таблиц — этот режим используется при размещении таблиц.
-
Расположение таблицы — этот режим используется при позиционировании элементов.
Макет блока — этот режим используется при оформлении документов.
Встроенный макет — этот режим используется при размещении текста.
Расположение таблиц — этот режим используется при размещении таблиц.
Расположение таблицы — этот режим используется при позиционировании элементов.
Все эти режимы используются для выравнивания определенных элементов, таких как документы, текст, таблицы и т. Д., Однако ни один из них не обеспечивает полноценного решения для размещения сложных веб-сайтов. Первоначально это делалось с использованием комбинации плавающих элементов, позиционированных элементов и макета таблицы (часто). Но поплавки позволяют только горизонтально расположить ящики.
Что такое Flexbox?
В дополнение к вышеупомянутым режимам CSS3 предоставляет еще один режим макета Flexible Box, обычно называемый Flexbox .
Используя этот режим, вы можете легко создавать макеты для сложных приложений и веб-страниц. В отличие от поплавков, макет Flexbox дает полный контроль над направлением, выравниванием, порядком, размером блоков.
Особенности Flexbox
Ниже приведены заметные особенности макета Flexbox —
-
Направление — Вы можете расположить элементы на веб-странице в любом направлении, например слева направо, справа налево, сверху вниз и снизу вверх.
-
Порядок — Используя Flexbox, вы можете изменить порядок содержимого веб-страницы.
-
Перенос — В случае несоответствующего пространства для содержимого веб-страницы (в одну строку) вы можете переносить их на несколько строк (как по горизонтали), так и по вертикали.
-
Выравнивание — Используя Flexbox, вы можете выровнять содержимое веб-страницы относительно их контейнера.
-
Изменение размера — с помощью Flexbox вы можете увеличивать или уменьшать размер элементов на странице, чтобы они помещались в доступное пространство.
Направление — Вы можете расположить элементы на веб-странице в любом направлении, например слева направо, справа налево, сверху вниз и снизу вверх.
Порядок — Используя Flexbox, вы можете изменить порядок содержимого веб-страницы.
Перенос — В случае несоответствующего пространства для содержимого веб-страницы (в одну строку) вы можете переносить их на несколько строк (как по горизонтали), так и по вертикали.
Выравнивание — Используя Flexbox, вы можете выровнять содержимое веб-страницы относительно их контейнера.
Изменение размера — с помощью Flexbox вы можете увеличивать или уменьшать размер элементов на странице, чтобы они помещались в доступное пространство.
Поддержка браузеров
Ниже приведены браузеры, которые поддерживают Flexbox.