Space Between Utility

A space between utility built with pure HTML and CSS that distributes items evenly across a container by pushing the first and last elements to opposite edges, creating balanced separation without fixed margins or JavaScript.

Usage

This component is ideal for layouts where content should occupy available space intelligently, such as header bars, navigation rows, meta rows, action toolbars, or footers where elements need clear separation without manual spacing.

Implementation

The utility is implemented using CSS Flexbox with justify-content: space-between, allowing elements to automatically spread across the container while remaining aligned and responsive.

HTML

<div class="ss-flex-between">
  <span>Logo</span>
  <span>Menu</span>
</div>

<div class="ss-flex-between">
  <span>Logo</span>
  <span>Menu</span>
</div>

CSS

.ss-flex-between{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;                 

  color:var(--flex-text);
}

:root{
  --flex-text:#FF2E63;
}

@media (prefers-color-scheme: dark){
  :root{
    --flex-text:#08D9D6;
  }
}

.ss-flex-between{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;                 

  color:var(--flex-text);
}

:root{
  --flex-text:#FF2E63;
}

@media (prefers-color-scheme: dark){
  :root{
    --flex-text:#08D9D6;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Automatically distributes available space
• Removes need for manual margin hacks
• Keeps layouts clean and predictable
• Designed for headers, bars, and utility rows

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.