# Stacks

From a component standpoint, stacks are the foundation of every layout. Most components and snippets will start with a stack. Under the hood, they mimic a flexbox layout.

> **Tip**

If you are new to CSS Flexbox, try out this interactive [tool](https://flexbox.help). Or, simply change the properties in the editor to see realtime changes.



Stack Specific Properties [#stack-specific-properties]

Stacks have unique properties:

<img src="__img0" />

* **Axis**: Determines the arrangement of items within the stack.
  1. `Horizontal`: Items are arranged left to right.
  2. `Vertical`: Items are arranged top to bottom.
  3. `Layered`: Items are stacked on top of each other.

* **Vertical**: Controls the vertical alignment of the items within the stack.
  1. `Top`: Aligns items to the top of the container.
  2. `Center`: Aligns items vertically in the center of the container.
  3. `Bottom`: Aligns items to the bottom of the container.
  4. `Stretch`: Stretches items to fill the vertical space of the container.
  5. `Baseline`: Aligns items according to their baseline.

* **Horizontal**: Controls the horizontal alignment of the items within the stack.
  1. `Left`: Aligns items to the left of the container.
  2. `Center`: Aligns items horizontally in the center of the container.
  3. `Right`: Aligns items to the right of the container.
  4. `Fill Equally`: Distributes items evenly across the container, filling the space equally.
  5. `Space Evenly`: Distributes items with equal space around them.
  6. `Space Around`: Distributes items with space around them, with half-size space on the edges.
  7. `Space Between`: Distributes items with space only between them, with no space at the edges.

* **Spacing**: Defines the amount of space between items within the stack, measured in pixels by default.

* **Wrap**: Specifies how items within the stack should behave when they exceed the container's width.
  1. `Don't Wrap`: Items remain in a single line and do not wrap onto a new line.
  2. `Wrap`: Items wrap onto the next line when they exceed the container's width.
  3. `Wrap Reverse`: Items wrap onto the previous line in reverse order.

* **Scroll**: Determines the scrolling behavior of the stack.
  1. `None`: Disables scrolling within the stack.
  2. `Normal`: Enables standard scrolling behavior.
  3. `Paging`: Enables paginated scrolling, allowing users to swipe through pages of items. See "Creating Carousels" below.
  4. `Infinite`: Endless scrolling, items clone and repeat themselves once they reach the end.

* **Snap Position**: Defines the position at which items snap into place during paging. Only relevant if `Scroll` is set to `Paging`.
  1. `Start`: Items snap to the start of the container.
  2. `Center`: Items snap to the center of the container.
  3. `End`: Items snap to the end of the container.

* **Auto Paging**: Controls whether a carousel's contents should automatically page between items. Only relevant if `Scroll` is set to `Paging`.
  1. `Disabled`: Auto paging is turned off, and items page via user interaction.
  2. `Enabled`: Auto paging is turned on and items will automatically page according to the paging delay.

* **Paging Delay**: The duration to automatically advance the slides. Only relevant if `Scroll` is set to `Paging` and `Auto Paging` is set to `Enabled`.

* **Infinite Scroll Speed**: The amount of pixels per frame that the carousel should advance. Only relevant if `Scroll` is set to `Infinite`.

To see how to use stacks for common designs, check out these pages:

* [Carousel](/docs/dashboard/dashboard-creating-paywalls/paywall-editor-carousel-component)
* [Autoscrolling](/docs/dashboard/dashboard-creating-paywalls/paywall-editor-autoscroll-component)
* [Slides](/docs/dashboard/dashboard-creating-paywalls/paywall-editor-slides-component)
* [Navigation](/docs/dashboard/dashboard-creating-paywalls/paywall-editor-navigation-component)