Using the Flex Component

Learn how to use and customize the Flex component in Rocketship with visual examples.

experimental

Overview

The Flex component in Rocketship is a versatile layout tool that allows you to create flexible box layouts with ease. It’s designed to be customizable and easy to use in your Astro projects.

The Flex component is based on the CSS Flexbox layout model and provides a simple way to create complex layouts without the need for additional CSS. You can use the Flex component to create responsive layouts, align items, and distribute space within a container.

In this guide, we’ll explore how to use the Flex component in Rocketship and cover some common layout patterns and examples.

Basic Usage

The Flex component in Rocketship is designed to be easy to use and highly customizable. You can create a flex container by wrapping your content in a <Flex> component and adding flex items inside it.

Here’s a basic example of using the Flex component:

Basic Flex Example

Item 1

Item 2

Item 3


<Flex>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

Direction

The Flex component allows you to control the direction of the flex container using the direction property. You can set the direction to row, row-reverse, column, or column-reverse to change the layout of the flex items.

Here are some examples of using the direction property:

Flex with row direction

Item 1

Item 2

Item 3


<Flex direction="row">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

Flex with row-reverse direction

Item 1

Item 2

Item 3


<Flex direction="row-reverse">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

Flex with column direction

Item 1

Item 2

Item 3


<Flex direction="column">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

Flex with column-reverse direction

Item 1

Item 2

Item 3


<Flex direction="column-reverse">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

Justify and Align

The Flex component in Rocketship provides properties to control how flex items are aligned and justified within the flex container. You can use the justify and align properties to control the alignment of flex items along the main and cross axes.

Here are some examples of using the justify and align properties:

Flex with justify between

Item 1

Item 2

Item 3

<Flex justify="between"> 
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

Flex with justify center

Item 1

Item 2

Item 3

<Flex justify="center"> 
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

Flex with justify start

Item 1

Item 2

Item 3

<Flex justify="start"> 
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

Flex with justify end

Item 1

Item 2

Item 3


<Flex justify="end"> 
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

Flex with justify around

Item 1

Item 2

Item 3


<Flex justify="around"> 
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

Flex with justify evenly

Item 1

Item 2

Item 3


<Flex justify="evenly"> 
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

Flex with align start

Item 1

Item 2

Item 3


<Flex align="start" style="height: 100px;"> 
  <div>Item 1</div>
  <div style="height: 60px;">Item 2</div>
  <div>Item 3</div>
</Flex>

Flex with align end

Item 1

Item 2

Item 3


<Flex align="end" style="height: 100px;"> 
  <div>Item 1</div>
  <div style="height: 60px;">Item 2</div>
  <div>Item 3</div>
</Flex>

Flex with align center

Item 1

Item 2

Item 3


<Flex align="center" style="height: 100px;"> 
  <div>Item 1</div>
  <div style="height: 60px;">Item 2</div>
  <div>Item 3</div>
</Flex>

Flex with align baseline

Item 1

Item 2

Item 3


<Flex align="baseline" style="height: 100px;"> 
  <div>Item 1</div>
  <div style="height: 60px; padding-top: 20px;">Item 2</div>
  <div>Item 3</div>
</Flex>

Flex with align stretch

Item 1

Item 2

Item 3


<Flex align="stretch" style="height: 100px;"> 
  <div>Item 1</div>
  <div style="height: 60px;">Item 2</div>
  <div>Item 3</div>

</Flex>

Flex with wrap

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6


<Flex wrap="wrap" style="width: 300px;"> 
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
</Flex>

Flex with gap

Item 1

Item 2

Item 3


<Flex gap="10px"> 
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

Flex with padding

Item 1

Item 2

Item 3


<Flex padding="20px"> 
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

Flex with margin

Item 1

Item 2

Item 3


<Flex margin="20px"> 
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

Flex with custom styles

Item 1

Item 2

Item 3


<Flex style="background-color: #f0f0f0; padding: 20px;"> 
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

Card Title

This is some sample text for the card description. It can be as long as needed.

Flex Item 1

Flex Item 2

Flex Item 3

Flex Item 1

Flex Item 2

Flex Item 3

Grid Item 1

Grid Item 2

Grid Item 3

Column 1

Item 1

Item 2

Column 2

Item 1

Item 2

Section 1

Section 2

Section 3

Column 1

Content for column 1

Column 2

Content for column 2

Column 1

Content for column 1

Column 2

Content for column 2

Item 1

Item 2

Item 3

How to use the Rocketship Flex component?

The Flex component in Rocketship is a versatile layout tool that allows you to create flexible box layouts with ease. It’s designed to be customizable and easy to use in your Astro projects.

Installation

Copy the Flex component from the rocketship.run website.
Paste the component in your project’s src/components/ui folder.
Import and use the component in your Astro project.

Importing the component

import Flex from '@/components/ui/Flex.astro';

Basic usage

<Flex>
  <div class="demo-box">Item 1</div>
  <div class="demo-box">Item 2</div>
  <div class="demo-box">Item 3</div>
</Flex>

Result:

Item 1

Item 2

Item 3

Properties

The Flex component comes with several properties to customize its behavior:

Direction

Controls the direction of the flex container.

Value	Description	Code	Example
row	Left to right (default)	`<Flex direction="row">`	1 2 3
row-reverse	Right to left	`<Flex direction="row-reverse">`	1 2 3
column	Top to bottom	`<Flex direction="column">`	1 2 3
column-reverse	Bottom to top	`<Flex direction="column-reverse">`	1 2 3

Justify

Aligns flex items along the main axis.

Value	Description	Code	Example
start	Items are packed toward the start (default)	`<Flex justify="start">`	1 2 3
end	Items are packed toward the end	`<Flex justify="end">`	1 2 3
center	Items are centered	`<Flex justify="center">`	1 2 3
between	Items are evenly distributed	`<Flex justify="between">`	1 2 3
around	Items are evenly distributed with equal space around them	`<Flex justify="around">`	1 2 3
evenly	Items are distributed with equal space between them	`<Flex justify="evenly">`	1 2 3

Align

Aligns flex items along the cross axis.

Value	Description	Code	Example
start	Items are aligned to the start	`<Flex align="start">`	1 2 3
end	Items are aligned to the end	`<Flex align="end">`	1 2 3
center	Items are centered	`<Flex align="center">`	1 2 3
baseline	Items are aligned to their baselines	`<Flex align="baseline">`	1 2 3
stretch	Items are stretched to fit the container (default)	`<Flex align="stretch">`	1 2 3

Wrap

Controls whether flex items are forced onto one line or can wrap onto multiple lines.

Value	Description	Code	Example
nowrap	Single-line (default)	`<Flex wrap="nowrap">`	1 2 3 4
wrap	Multi-line	`<Flex wrap="wrap">`	1 2 3 4
wrap-reverse	Multi-line, opposite direction	`<Flex wrap="wrap-reverse">`	1 2 3 4

Spacing Properties

The Flex component also supports spacing properties for margin and padding. These properties use a numeric scale that corresponds to specific spacing values in your design system.

Example usage:

<Flex mt="4" pb="2" pl="3">
  <!-- Content -->
</Flex>

Content

Available spacing properties:

Margin: m, mt, mr, mb, ml, mx, my
Padding: p, pt, pr, pb, pl, px, py

Practical Examples

Let’s explore some practical examples of using the Flex component in common layout scenarios:

<Flex justify="between" align="center" p="4" style="background-color: #f0f0f0;">
  <div class="logo">Logo</div>
  <Flex as="nav" gap="4">
    <a href="#" class="nav-link">Home</a>
    <a href="#" class="nav-link">About</a>
    <a href="#" class="nav-link">Contact</a>
  </Flex>
</Flex>

Result:

Logo

Home About Contact

2. Card Layout 2

<Flex direction="column" padding="4" style="max-width: 300px; border: 1px solid #ccc; border-radius: 8px;">
  <img src="/placeholder-image.jpg" alt="Card image" style="width: 100%; height: 200px; object-fit: cover;" />
  <h2 class="mt-2">Card Title</h2>
  <p class="mt-2">This is some sample text for the card description. It can be as long as needed.</p>
  <Flex justify="end" mt="4">
    <button class="btn">Learn More</button>
  </Flex>
</Flex>

Result:

Card Title

This is some sample text for the card description. It can be as long as needed.

3. Responsive Grid Layout

<Flex wrap="wrap" justify="between" style="margin: -8px;">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</Flex>

<style>
  .grid-item {
    flex-basis: calc(50% - 16px);
    margin: 8px;
    padding: 16px;
    background-color: #f0f0f0;
    text-align: center;
  }
  @media (min-width: 768px) {
    .grid-item {
      flex-basis: calc(25% - 16px);
    }
  }
</style>

These examples demonstrate how versatile the Flex component can be in creating various layout patterns. Remember that the Flex component is highly customizable, and you can adjust its properties to fit your specific layout needs.

Using the Flex Component

Overview

Basic Usage

Basic Flex Example

Direction

Flex with row direction

Flex with row-reverse direction

Flex with column direction

Flex with column-reverse direction

Justify and Align

Flex with justify between

Flex with justify center

Flex with justify start

Flex with justify end

Flex with justify around

Flex with justify evenly

Flex with align start

Flex with align end

Flex with align center

Flex with align baseline

Flex with align stretch

Flex with wrap

Flex with gap

Flex with padding

Flex with margin

Flex with custom styles

Card Title

Column 1

Column 2

Column 1

Column 2

Column 1

Column 2

How to use the Rocketship Flex component?

Installation

Importing the component

Basic usage

Properties

Direction

Justify

Align

Wrap

Spacing Properties

Practical Examples

1. Navigation Bar

2. Card Layout 2

Card Title

3. Responsive Grid Layout