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

При создании страницы вы можете настраивать визуальное отображение элементов и их расположение по отношению друг к другу (один под другим или бок о бок), а также их поведение при изменении контента. Для установки этих параметров используются Настройки отображения (Display) на вкладке Стилей (Styles) правой панели.

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

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

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

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

Подробнее - Авто-расположение (в режиме Flex).

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

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

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

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

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

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