Code
<w-stack align-items="center" full-width gap="medium" wrap>
<w-stack-item flex="1">
<div>1</div>
</w-stack-item>
<w-stack-item flex="1">
<div>1</div>
</w-stack-item>
<w-stack-item flex="1">
<div>1</div>
</w-stack-item>
</w-stack>
Props
Stack
|
Name |
Description |
Type |
Default |
Values |
|---|---|---|---|---|
|
gap |
The values in the gap are mapped to our semantic spacing tokens, which are small (for S), medium (for M), large (for L), and xlarge (for XL). |
string |
none |
none, small, medium, large, xlarge |
|
wrap |
It defines whether the flex items are forced in a single line or can be flowed into multiple lines. If set to multiple lines, it also defines the cross-axis which determines the direction new lines are stacked in. Values are false (default) and true for multiline items. |
boolean |
false |
false, true |
|
direction |
Direction of the stack items. |
string |
row |
row, column, row-reverse, column-reverse |
|
align-items |
Sets the vertical alignment and distribution of the stack items. |
string |
flex-start |
flex-start, flex-end, center, baseline, stretch |
|
justify-content |
Sets the horizontal alignment and distribution of the stack items. |
string |
flex-start |
flex-start, flex-end, center, space-between |
|
full-width |
Expands the stack to occupy all available widths. |
boolean |
false |
false, true |
|
full-height |
Expands the stack to occupy all available height. |
boolean |
false |
false, true |
StackItem
|
Name |
Description |
Type |
Default |
Values |
|---|---|---|---|---|
|
flex |
The flex property sets how a flex item will grow or shrink to fit the space available in its flex container. |
string |
'0 1 auto' |
any valid CSS flex value |
Slots
Stack
|
Name |
Description |
|---|---|
|
default |
Default content slot |
Stack Item
|
Name |
Description |
|---|---|
|
default |
Default content slot |