CSS Flexbox: One-Dimensional Alignment and Spacing

CSS Flexbox

Flexbox distributes items along one main axis while controlling cross-axis alignment. Correct layouts depend on flex basis, growth, shrinkage, wrapping, minimum sizes, and overflow.

Flexbox, short for Flexible Box Layout, is a CSS layout system designed for arranging items in one direction at a time: either a row or a column. It makes alignment, spacing, ordering, wrapping, and flexible sizing much easier than older layout techniques like floats or inline-block hacks.

Flexbox is especially useful for navigation bars, button groups, toolbars, cards, media objects, forms, equal-height columns, vertical centering, and responsive component layouts. For large two-dimensional page layouts, CSS Grid is often better, but Flexbox is usually the first choice for one-dimensional component layouts.

Add display: flex to the parent to create a flex container.
Direct children of the container become flex items.
justify-content aligns items on the main axis.
align-items aligns items on the cross axis.
flex, flex-grow, flex-shrink, and flex-basis control item sizing.

Flex container and Flex Items

Flexbox has two important parts: the flex container and the flex items. The container is the parent element with display: flex. Only its direct children become flex items.

Basic Flexbox Setup

<div class="container">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
</div>

Flex container and Flex Items - CSS Example

.container {
  display: flex;
  gap: 1rem;
}

.item {
  padding: 1rem;
  background: #dbeafe;
}

Main Axis and Cross Axis

Flexbox works with two axes. The main axis is the direction flex items flow. The cross axis is perpendicular to the main axis. These axes change when you change flex-direction.

flex-direction	Main Axis	Cross Axis
row	Left to right	Top to bottom
row-reverse	Right to left	Top to bottom
column	Top to bottom	Left to right
column-reverse	Bottom to top	Left to right

Flex Direction

.row-layout {
  display: flex;
  flex-direction: row;
}

.column-layout {
  display: flex;
  flex-direction: column;
}

Flex container Properties

Container properties are applied to the parent flex container. They control direction, wrapping, alignment, spacing, and multi-line behavior.

Property	Purpose	Common Values
display	Creates a flex container	flex, inline-flex
flex-direction	Sets the main axis	row, column
flex-wrap	Allows items to wrap	nowrap, wrap
flex-flow	Direction and wrap shorthand	row wrap
justify-content	Aligns on the main axis	center, space-between
align-items	Aligns on the cross axis	center, stretch
align-content	Aligns multiple flex lines	center, space-between
gap	Creates space between items	1rem, 1rem 2rem

Container Properties

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-content: start;
  gap: 1rem;
}

justify-content

justify-content controls how items are distributed along the main axis. In the default row direction, this usually means horizontal alignment.

Main Axis Alignment

.start {
  justify-content: flex-start;
}

.center {
  justify-content: center;
}

.between {
  justify-content: space-between;
}

.evenly {
  justify-content: space-evenly;
}

align-items

align-items controls alignment along the cross axis. In the default row direction, this usually means vertical alignment.

Cross Axis Alignment

.container {
  display: flex;
  align-items: stretch;    /* default */
  align-items: flex-start;
  align-items: center;
  align-items: flex-end;
  align-items: baseline;
}

Centering with Flexbox

One of the most common Flexbox uses is centering content horizontally and vertically. Use justify-content: center for the main axis and align-items: center for the cross axis.

Perfect Centering

<div class="center-box">
  <div class="content">Centered</div>
</div>

Centering with Flexbox - CSS Example

.center-box {
  min-height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  padding: 1rem 2rem;
  background: #dbeafe;
}

Flex Item Properties

Item properties are applied to direct children of a flex container. They control individual item order, growth, shrink behavior, starting size, and cross-axis alignment.

Property	Purpose	Example
order	Changes visual order	order: 2
flex-grow	Controls how item grows	flex-grow: 1
flex-shrink	Controls how item shrinks	flex-shrink: 0
flex-basis	Initial main-axis size	flex-basis: 250px
flex	Grow, shrink, basis shorthand	flex: 1 1 250px
align-self	Overrides cross-axis alignment for one item	align-self: center

Item Sizing

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 250px;
}

.item {
  flex: 1 1 250px; /* same idea, shorter */
}

Understanding flex Shorthand

The flex shorthand is one of the most important Flexbox properties. It controls how much an item grows, how much it shrinks, and what size it starts from.

Value	Meaning	Use Case
flex: 1	Grow equally from zero basis	Equal columns
flex: auto	Grow and shrink from content size	Flexible content-based items
flex: none	No grow, no shrink	Fixed-size item
flex: 0 0 250px	Fixed 250px basis	Sidebar or fixed card width
flex: 1 1 300px	Start at 300px, grow and shrink	Responsive cards

Wrapping Flex Items

By default, flex items try to stay on one line. If there is not enough space, they may shrink too much or overflow. Use flex-wrap: wrap when items should move to the next line.

Wrapping Cards

<div class="card-list">
  <article class="card">HTML</article>
  <article class="card">CSS</article>
  <article class="card">JavaScript</article>
</div>

Wrapping Flex Items - CSS Example

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 220px;
  padding: 1rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

Responsive Navbar

Flexbox is excellent for navigation bars because it can align logo, links, and actions in a single row, then wrap or stack them on smaller screens.

Responsive Navbar - HTML Example

<nav class="navbar">
  <a class="logo" href="/">Brand</a>
  <div class="nav-links">
    <a href="/courses">Courses</a>
    <a href="/blog">Blog</a>
    <a href="/contact">Contact</a>
  </div>
</nav>

Responsive Navbar - CSS Example

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
}

.nav-links {
  display: flex;
  gap: 1rem;
}

@media (max-width: 600px) {
  .navbar,
  .nav-links {
    flex-direction: column;
    align-items: stretch;
  }
}

Sidebar Layout

Flexbox can create simple two-column layouts where one column is fixed and the other grows to fill the remaining space.

min-width: 0 is often important on flexible content areas because it allows long text or wide content to shrink inside the available space instead of forcing overflow.

Sidebar Layout - HTML Example

<div class="layout">
  <aside class="sidebar">Filters</aside>
  <main class="content">Product list</main>
</div>

Sidebar Layout - CSS Example

.layout {
  display: flex;
  gap: 1.5rem;
}

.sidebar {
  flex: 0 0 260px;
}

.content {
  flex: 1;
  min-width: 0;
}

Sticky Footer Layout

Flexbox can push a footer to the bottom of the viewport when the page content is short, while still allowing the footer to move down naturally when content is long.

Sticky Footer

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

footer {
  flex-shrink: 0;
}

Flexbox vs Grid

Flexbox and Grid are both modern CSS layout systems, but they solve different layout problems.

Feature	Flexbox	Grid
Layout direction	One-dimensional	Two-dimensional
Best for	Rows or columns of items	Rows and columns together
Common uses	Navbars, cards, forms, toolbars	Page layouts, dashboards, galleries
Content control	Content often drives layout	Layout often defines placement

Debugging Flexbox

When a flex layout does not behave as expected, check the container, the axes, wrapping, item sizes, and overflow. Browser DevTools also provide Flexbox overlays that make alignment and spacing easier to inspect.

Make sure display: flex is on the parent, not the child.
Check whether the layout direction is row or column.
Use gap for spacing between items.
Add flex-wrap: wrap when items should move to a new line.
Use min-width: 0 on flexible children that contain long text or wide content.
Remember that align-content only affects multiple flex lines.

Conclusion

Flexbox is one of the most important tools for modern CSS layout. It makes it simple to align items, distribute space, create equal columns, build responsive components, center content, and replace many old float-based layout techniques.

To master Flexbox, focus on the parent-child relationship, understand the main and cross axes, practice justify-content and align-items, and learn how flex, flex-wrap, and gap affect layout. Once those ideas are clear, Flexbox becomes predictable and extremely useful.