Flex

• Основы
• Выравнивание

Основы

Для расположения элементов на странице можно использовать компонент Flex. Компоненты внутри Flex будут отображаться в режиме display: flex.

make(
    iterable $components = [],
    int $colSpan = 12,
    int $adaptiveColSpan = 12,
    string $itemsAlign = 'center',
    string $justifyAlign = 'center',
    bool $withoutSpace = false
)

• $components - список компонентов,
• $colSpan - количество колонок, которые занимает блок для размеров экрана 1280px и более,
• $adaptiveColSpan - количество колонок, которые занимает блок для размеров экрана до 1280px,
• $itemsAlign - аналог css класса items-$itemsAlign в Tailwind,
• $justifyAlign - аналог css класса justify-$justifyAlign в Tailwind,
• $withoutSpace - флаг для отступов.

use MoonShine\UI\Components\Layout\Flex;
 
Flex::make([
    Text::make('Test'),
    Text::make('Test 2'),
]),

<x-moonshine::layout.flex :justifyAlign="'end'">
    <div>Text 1</div>
    <div>Text 2</div>
</x-moonshine::layout.flex>

Выравнивание

Для выравнивания элементов вы можете использовать методы itemsAlign() и justifyAlign().

Flex::make([
    Text::make('Test'),
    Text::make('Test 2'),
])
    ->justifyAlign('between')
    ->itemsAlign('start')