Flexbox Patterns

We'll explore the Flexbox patterns like HStack and VStack as well as the Circle pattern to build out a page.

HStack

The HStack pattern is a wrapper around the stack pattern that sets the direction property to horizontal, and centers the elements vertically.

import { hstack } from '../styled-system/patterns'

function App() {
  return (
    <div className={hstack({ gap: '6' })}>
      <div>First</div>
      <div>Second</div>
      <div>Third</div>
    </div>
  )
}

VStack

The VStack pattern is a wrapper around the stack pattern that sets the direction property to vertical, and centers the elements horizontally.

import { vstack } from '../styled-system/patterns'

function App() {
  return (
    <div className={vstack({ gap: '6' })}>
      <div>First</div>
      <div>Second</div>
      <div>Third</div>
    </div>
  )
}

Circle

The Circle pattern is used to create a circle.

import { circle } from '../styled-system/patterns'

function App() {
  return <div className={circle({ size: '12', bg: 'red.300' })} />
}