What is CSS flex

Компьютер, программы

→

Html & CSS

Что такое CSS flex ?

посмотрели 4852 раз

обновлено: 10 March 2020

Посмотрим, как раньше верстали, создавали html страницы

1) Давным-давно html страницы делали в виде таблиц <table>

Html

2) Потом html страницы делали в виде <div> и использовали inline-block

Html

3) Сейчас html страницы делают в виде <div> и используют flex

Html

И так что такое CSS flex ?

CSS flex это свойство.

CSS flex для div пишется вот так:

Html

HTML элемент с flex может растягиваться или сжиматься и таким образом заполнять свободное пространство.

Люди при обсуждении часто говорят слово flex.
На самом деле полное название спецификации по flex вот так звучит CSS Flexible Box Layout Module или сокращщенно Flexbox.

Зачем использовать flex ?

Все блоки очень легко делаются резиновым, что уже следует из названия flex. Элементы могут сжиматься и растягиваться по заданным правилам, занимая нужное пространство.

Выравнивание по вертикали и горизонтали, базовой линии текста работает шикарно.

Расположение элементов в html не имеет решающего значения. Его можно поменять в CSS. Это особенно важно для некоторых аспектов responsive верстки

Элементы могут автоматически выстраиваться в несколько строк/столбцов, занимая все предоставленное место.

Множество языков в мире используют написание справа налево rtl (right-to-left), в отличии от привычного нам ltr (left-to-right).

Flexbox адаптирован для изменения направления.

Во flexbox есть понятие начала и конца, а не права и лева.
В браузерах с локалью rtl все элементы будут автоматически расположены в реверсном порядке.

Синтаксис CSS flex очень прост и осваивается довольно быстро.

Все свойства CSS flex

← Previous topic
Books to study CSS

Next topic →
The header in the table is always visible when scrolling | freeze header in table | HTML