Это два основных CSS-инструмента в верстке адаптивных сайтов, которые позволяют сделать структуру сайта, то есть задать параметры и взаимное расположение его различных элементов.
Сетка — это что-то вроде каркаса, на который накладываются элементы сайта. В ней есть несколько ключевых составляющих:
- Колонки — параллельные вертикальные полосы, разделенные межколонными отступами. Две и более колонки формируют столбцы.
- Ряды — параллельные горизонтальные колонки.
- Модули — пересечения рядов и колонок.
- Поля — отступы по краям макета экрана.
Адаптивность достигается за счет того, что размер части или всех вертикальных и горизонтальных колонок на странице задается при верстке в CSS-коде в процентах — и они автоматически подстраиваются под экраны с разным расширением.
Флексбокс или Flexbox (от flexible box — буквально «гибкий контейнер») — это модуль CSS, который дает возможность вкладывать одни элементы в другие, регулировать размеры, порядок, направление, отступы и другие параметры элементов сайта и их взаимного расположения на экране. Если очень сильно упростить, то он работает по принципу коробок с содержимым. Можно по-разному организовывать содержимое каждой «коробки» и по-разному располагать «коробки» относительно друг друга.
При этом «коробки» не простые, а умные. Флексбокс умеет автоматически заполнять содержимым все пространство внутри каждой «коробки», изменяя размер элементов и отступы между ними. Соответственно, не нужно адаптировать все до последнего пикселя для каждого возможного разрешения: многое делается автоматически.
Комментарии к статье
Комментарии: 0