Skip to main content

Stack

The <Stack/> is a layout component that allows to group components together and create a space between them.

Source@matro-ui/stack

Import​

import { Stack } from "matro-ui";
  • Stack: The stack layout component itself.

Usage​

Here's simple exaple of <Stack/> component with gap 10px:

Loading...
Live Editor
 <Stack gap="10">
   <div className="example">1</div>
   <div className="example">2</div>
   <div className="example">3</div>
 </Stack>

Direction​

If you want to use column dimension, simply add column prop:

Loading...
Live Editor
 <Stack column>
   <div className="example">1</div>
   <div className="example">2</div>
   <div className="example">3</div>
 </Stack>

Flex​

By default, <Stack/> items has width set to fit-content. If you want to change it, add flex prop:

Loading...
Live Editor
 <Stack flex>
   <div className="example">1</div>
   <div className="example">2</div>
   <div className="example">3</div>
 </Stack>

tip

Alternatively, you can use combined flex property (will be passed to children):

Loading...
Live Editor
 <Stack flex="0 1 150px">
   <div className="example">1</div>
   <div className="example">2</div>
   <div className="example">3</div>
 </Stack>

Wrap​

By default, <Stack/> items is not wrap when overfow of parent is happen. To change this behaviour, simply add wrap prop:

Loading...
Live Editor
 <Stack flex="1 1 300px" gap="2" wrap>
   <div className="example">1</div>
   <div className="example">2</div>
   <div className="example">3</div>
   <div className="example">4</div>
   <div className="example">5</div>
 </Stack>

Justify & Align​

<Stack/> has two axis - main and cross (MDN: learn more). To align items by the main axis
use justify prop (val: start, end, center, spaceBetween, spaceAround):

Justify by main axis:​

Loading...
Live Editor
<div className="small">
 <LabelText>justify="start" (default)</LabelText>
 <Stack>
   <div className="example">1</div>
   <div className="example">2</div>
 </Stack>

<LabelText>justify="end"</LabelText>
 <Stack justify="end">
   <div className="example">1</div>
   <div className="example">2</div>
 </Stack>

 <LabelText>justify="center"</LabelText>
 <Stack justify="center">
   <div className="example">1</div>
   <div className="example">2</div>
 </Stack>

 <LabelText>justify="spaceBetween"</LabelText>
 <Stack justify="spaceBetween">
   <div className="example">1</div>
   <div className="example">2</div>
 </Stack>

 <LabelText>justify="spaceAround"</LabelText>
 <Stack justify="spaceAround">
   <div className="example">1</div>
   <div className="example">2</div>
 </Stack>
</div>

Align by cross axis, using align prop (val: start, end, center, stretch):​

Loading...
Live Editor
<div className="small align-example">

 <LabelText>align="start" (default)</LabelText>
 <Stack>
   <div className="example">1</div>
   <div className="example">2</div>
   <div className="example">3</div>
 </Stack>

 <LabelText>align="stretch" </LabelText>
 <Stack align="stretch">
   <div className="example">1</div>
   <div className="example">2</div>
   <div className="example">3</div>
 </Stack>

<LabelText>align="end"</LabelText>
 <Stack align="end">
   <div className="example">1</div>
   <div className="example">2</div>
   <div className="example">3</div>
 </Stack>

 <LabelText>align="center"</LabelText>
 <Stack align="center">
   <div className="example">1</div>
   <div className="example">2</div>
   <div className="example">3</div>
 </Stack>

</div>

Advanced examples​

info

Here's more advanced examples of how <Stack/> can be used:

Loading...
Live Editor
<div className="small align-example">
 <LabelText>row with stretch, flex 1</LabelText>

 <Stack flex align="stretch">
   <div className="example">1</div>
   <div className="example">2</div>
 </Stack>
</div>
Loading...
Live Editor
<div className="small align-example">
  <LabelText>flex 0, align end, justify end</LabelText>

  <Stack align="end" justify="end">
    <div className="example">1</div>
    <div className="example">2</div>
    <div className="example">3</div>
  </Stack>
</div>
Loading...
Live Editor
<div className="small align-example">
  <LabelText>
    align center, justify center, flexGrow 0 flexShrink 0, base 200px</LabelText>

  <Stack flex="0 0 100px" align="center" justify="center">
    <div className="example">1</div>
    <div className="example">2</div>
    <div className="example">3</div>
  </Stack>
</div>
Loading...
Live Editor
<div className="small align-example">
  <LabelText>
    align stretch, justify center, flexGrow 0 flexShrink 0, base 200px</LabelText>

  <Stack flex="0 0 100px" align="stretch" justify="center">
    <div className="example">1</div>
    <div className="example">2</div>
    <div className="example">3</div>
  </Stack>
</div>
Loading...
Live Editor
<div className="small align-example">
  <LabelText>
   column align center, justify center, flexGrow 0 flexShrink 0, 
   minWidth 100px base 50px (in column base sets minHeight)</LabelText>

  <Stack column flex="0 0 50px" align="center" justify="center">
    <div className="example" style={{minWidth: 100}}>1</div>
    <div className="example" style={{minWidth: 100}}>2</div>
    <div className="example" style={{minWidth: 100}}>3</div>
  </Stack>
</div>
Loading...
Live Editor
<div className="small align-example">
  <LabelText>
   column align stretch, justify center, flexGrow 0 flexShrink 0, 
   base 60px padding 20px gap 10px</LabelText>

  <Stack 
    column 
    flex="0 0 60px" 
    align="stretch" 
    justify="center" 
    padding="20" 
    gap="10"
  >
    <div className="example">1</div>
    <div className="example">2</div>
    <div className="example">3</div>
  </Stack>
</div>