Резиновый макет позволяет автоматически адаптировать выравнивание и пропорции элементов к разным размерам и ориентациям страницы. Эта функция особенно полезна при работе с адаптивными документами, но подходит и для элементов с фиксированными размерами.
В Google Web Designer есть несколько способов создания резинового макета:
Flexbox (Fluid Layout) - Google Web Designer
Значения в процентах
Вы можете задать размер и положение макета в процентах вместо пикселей. Тогда его элементы будут оставаться пропорциональными и выравниваться относительно друг друга.
Чтобы использовать проценты вместо пикселей, нажмите px в поле на панели "Свойства" и выберите % в раскрывающемся списке.
Чтобы задать все параметры положения и размера в процентах, нажмите кнопку В процентах .
В документе можно задавать значения в процентах и пикселях одновременно.
Привязка
С помощью функции "Привязка" можно выравнивать элементы в контейнере, даже если меняется размер одного из элементов, самого контейнера, поля или ширины границы. Если вы настроите свойства положения или преобразования, элемент сместится со своей опорной точки.
Необходимо выбрать горизонтальный и вертикальный режим привязки. По умолчанию установлена привязка по верхнему левому краю.
Режимы горизонтальной привязки
| Режим | Эффект |
|---|---|
| По левому краю | Левый край элемента выравнивается с левым краем контейнера. |
| По центру | Центральная горизонталь элемента выравнивается с центральной горизонталью контейнера. |
| По правому краю | Правый край элемента выравнивается с правым краем контейнера. |
Режимы вертикальной привязки
| Режим | Эффект |
|---|---|
| По верхнему краю | Верхний край элемента выравнивается с верхним краем контейнера. |
| Посередине | Середина элемента по вертикали выравнивается с серединой контейнера по вертикали. |
| По нижнему краю | Нижний край элемента выравнивается с нижним краем контейнера. |
Режим привязки можно активировать на панели "Свойства" или на панели настроек инструмента, если выбран инструмент выделения .
Flexbox
Модель макета Flexbox (CSS Flexible Box Layout Module) позволяет гибко упорядочивать элементы в контейнере по строкам и столбцам. Чтобы оптимально использовать место в контейнере и поддерживать в нем порядок, каждый объект можно увеличивать или уменьшать.
Применить эту модель и настроить ее свойства можно на вкладке Flexbox на панели "Адаптивные". Подробнее…