VFlex
Vuero come with VFlex and VFlexItem which are utility components to compose CSS flexbox layout with ease. The component VFlex will represent the flex container and can contains anything in its slot. The component VFlexItem allow to have finest control how the item is positioned inside the VFlex parent.
You can find a complete guide on css-tricks.com
VFlex Props
Here is the full props available for <VFlex /> component:
| Props | Default | Type |
|---|---|---|
| flex-direction | row | row, row-reverse, column, column-reverse |
| flex-wrap | nowrap | nowrap, wrap, wrap-reverse |
| jusitfy-content | normal | flex-start, flex-end, start, end, left, right, center, space-between, space-around, space-evenly, normal |
| align-items | normal | flex-start, flex-end, start, end, left, right, center, baseline, stretch, normal |
| align-content | normal | flex-start, flex-end, start, end, left, right, center, space-between, space-around, space-evenly, normal |
| row-gap | normal | string |
| column-gap | normal | string |
| inline | false | boolean |
VFlexItem Props
Here is the full props available for <VFlexItem /> component:
| Props | Default | Type |
|---|---|---|
| order | 0 | string, number |
| flex-grow | 0 | string, number |
| flex-shrink | 0 | string, number |
| flex-basis | auto | string |
| align-selft | auto | auto, flex-start, flex-end, center, baseline, stretch |
VFlex Slots
Here is the full slots available for <VFlex /> component:
| Slot | Properties | Description |
|---|---|---|
| #default required | null | The flex items |