CSS Flexbox Layout

Master flexible box layouts for responsive design

Introduction to Flexbox

Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex (expand) to fill additional space or shrink to fit into smaller spaces.

.container {
  display: flex; /* or inline-flex */
}
                    

This simple property transforms all direct children into flex items.

Flex Direction

The flex-direction property establishes the main axis, defining the direction flex items are placed in the flex container.

Row (Default)

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

Row Reverse

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}
                    

Column

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

Column Reverse

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}
                    

Flex Wrap

The flex-wrap property controls whether the flex container is single-line or multi-line, and the direction of the cross-axis.

No Wrap (Default)

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}
                    

Wrap

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
                    

Justify Content

The justify-content property aligns flex items along the main axis of the current line of the flex container.

Flex Start (Default)

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

Flex End

.flex-container {
  display: flex;
  justify-content: flex-end;
}
                    

Center

.flex-container {
  display: flex;
  justify-content: center;
}
                    

Space Between

.flex-container {
  display: flex;
  justify-content: space-between;
}
                    

Space Around

.flex-container {
  display: flex;
  justify-content: space-around;
}
                    

Practical Example: Navbar

A common use case for flexbox is creating navigation bars.

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

.navbar-menu {
  display: flex;
  gap: 1rem;
}
                    

Flex Grow

The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.

1 (flex-grow: 1)

2 (flex-grow: 2)

3 (flex-grow: 3)

.flex-item-1 { flex-grow: 1; }
.flex-item-2 { flex-grow: 2; }
.flex-item-3 { flex-grow: 3; }
                    

Responsive Flexbox

Flexbox can be combined with media queries to create responsive layouts. Resize your browser to see the effect.

.responsive-flex {
  flex-direction: row;
}

@media (max-width: 768px) {
  .responsive-flex {
    flex-direction: column;
  }
}
                    