Булма Флекс Направление

В этой статье мы увидим flex-direction в Bulma . В Bulma свойства flexbox используются как помощники. Свойство flex-direction позволяет пользователю устанавливать направление элементов в контейнере flex с помощью утилит направления, таких как row, row-reverse, column, column-reverse. Иногда горизонтальные классы могут быть опущены, так как направлением по умолчанию в браузере является строка.

Классы Flex-Direction:

• is-flex-direction-row: этот класс flexbox позволяет пользователю устанавливать горизонтальное направление flex-элемента.
• is-flex-direction-row-reverse: этот класс flexbox позволяет пользователю устанавливать горизонтальное направление flex-элемента в обратном или противоположном направлении.
• is-flex-direction-column: этот класс flexbox позволяет пользователю устанавливать вертикальное направление flex-элемента.
• is-flex-direction-column-reverse: этот класс flexbox позволяет пользователю устанавливать вертикальное направление flex-элемента в обратном или противоположном направлении.

Синтаксис:

// flex-row
<div class="is-flex-direction-row">
....
</div>

// flex-row-reverse
<div class="is-flex-direction-row-reverse">
....
</div>

// flex-column
<div class="is-flex-direction-column">
....
</div>

// flex-column-reverse
<div class="is-flex-direction-column-reverse">
....
</div>

Пример 1: Примеры ниже иллюстрируют направление гибкого ряда Bulma:

Выход:

Пример 2. Примеры ниже иллюстрируют направление flex-row-reverse Bulma:

Выход:

Пример 3. Примеры ниже иллюстрируют направление гибкой колонки Bulma:

Выход:

Пример 4. Примеры ниже иллюстрируют обратное направление Bulma flex-column :

Выход:

Ссылка: https://bulma.io/documentation/helpers/flexbox-helpers/#flex-direction