Расположение элементов

При создании страницы вы можете настраивать визуальное отображение элементов и их расположение по отношению друг к другу (один под другим или бок о бок), а также их поведение при изменении контента. Для установки этих параметров используется опция Отображение (Display) в разделе Авто-лейаут (Auto Layout) на вкладке Дизайн (Design) правой панели.

Вы можете выбрать следующие настройки отображения:

Flex

Свойство Flex устанавливается на родительский элемент (flex-контейнер) и влияет на размещение в нем дочерних элементов. Оно позволяет гибко управлять расположением дочерних элементов внутри контейнера.

Подробнее - Flex-лейаут.

Block

Каждый элемент со свойством Block начинается с новой строки и занимает всю ширину родительского элемента.

Вы можете изменить ширину элемента в настройках Размера (Size). Однако, независимо от установленной ширины и содержимого, элемент будет толкать следующий за ним элемент на новую строку, так что разместить такие элементы в одной строке не получится.

Grid

Режим Grid позволяет сделать сетку, состоящую из строк и колонок.

Подробнее - Grid-лейаут.

None

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

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

Inline-block

Все элементы со свойством Inline-block размещаются бок о бок в одну строку, пока они в ней помещаются. При переполнении строки элементами, они начинают переноситься на следующую строку. Ширина элементов определяется их содержимым.

Inline-flex

Свойство Inline-flex используется для размещения нескольких flex-контейнеров в одной строке (подобно элементам Inline-block). Этого нельзя добиться при использовании свойства Flex, т.к. такой элемент занимает всю ширину строки, независимо от содержимого.