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

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

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

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

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

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

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

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

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

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

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

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

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