CSS Flex Container

Learn how to use Flex Container properties to control the layout of flex items

What is a CSS Flex Container?

A flex container is an element with display: flex or display: inline-flex. It enables a flex context for all its direct children (flex items). The flex container properties control how flex items are laid out within the container.

Flex Container Properties:

  • flex-direction - Sets the direction of the main axis
  • flex-wrap - Controls whether items wrap onto multiple lines
  • justify-content - Aligns items along the main axis
  • align-items - Aligns items along the cross axis
  • align-content - Aligns lines within the container (multi-line)
  • flex-flow - Shorthand for flex-direction and flex-wrap
1
2
3

Flex Container Properties Reference

PropertyDescriptionValues
flex-directionSets the direction of the main axisrow, row-reverse, column, column-reverse
flex-wrapControls whether items wrap onto multiple linesnowrap, wrap, wrap-reverse
justify-contentAligns items along the main axisflex-start, flex-end, center, space-between, space-around, space-evenly
align-itemsAligns items along the cross axisstretch, flex-start, flex-end, center, baseline
align-contentAligns lines within the container (multi-line)stretch, flex-start, flex-end, center, space-between, space-around
flex-flowShorthand for flex-direction and flex-wrapflex-direction flex-wrap

Flex Container Concepts in Detail

Main Axis vs Cross Axis

Understanding the two axes is fundamental to using Flexbox effectively.

Main Axis - Defined by flex-direction
Cross Axis - Perpendicular to the main axis
justify-content works along the main axis
align-items works along the cross axis

Single-line vs Multi-line

Flex containers can be single-line or multi-line depending on the flex-wrap property.

Single-line - flex-wrap: nowrap (default)
Multi-line - flex-wrap: wrap or wrap-reverse
align-content only affects multi-line containers
Multi-line containers are essential for responsive designs

Alignment Properties

Flexbox provides precise control over alignment in both directions.

justify-content - Main axis alignment
align-items - Cross axis alignment for single line
align-content - Cross axis alignment for multiple lines
Space distribution values create responsive spacing

Direction and Flow

Control the direction and wrapping of flex items.

flex-direction - Sets the main axis direction
flex-wrap - Controls item wrapping
flex-flow - Shorthand for direction and wrap
Direction affects the meaning of start/end values

Best Practices for Flex Containers

Layout & Responsive Design

  • Use appropriate flex-direction for your layout needs
  • Enable wrapping for responsive designs with flex-wrap: wrap
  • Use space distribution values for responsive spacing
  • Combine with media queries for complex responsive layouts
  • Consider using flex-basis instead of width for flexible items

Common Mistakes to Avoid

  • Forgetting to set flex-wrap for responsive layouts
  • Using fixed heights that prevent align-items: stretch from working
  • Not testing flexbox layouts in different browsers
  • Overusing flexbox when simpler layout methods would work
  • Ignoring the difference between align-items and align-content

Accessibility Considerations

  • Be cautious when using order property as it only affects visual order
  • Ensure content remains logical when read by screen readers
  • Test keyboard navigation through flex layouts
  • Consider how your layout responds to text zooming
  • Ensure sufficient color contrast in flex components

Flex Container Implementation Example

Example Code

/* CSS Flex Container Properties */

/* Basic flex container */
.flex-container {
  display: flex; /* or inline-flex */
  
  /* Direction and wrapping */
  flex-direction: row; /* row, row-reverse, column, column-reverse */
  flex-wrap: nowrap; /* nowrap, wrap, wrap-reverse */
  
  /* Shorthand for direction and wrap */
  flex-flow: row wrap; /* flex-direction + flex-wrap */
  
  /* Main axis alignment */
  justify-content: flex-start; /* flex-start, flex-end, center, space-between, space-around, space-evenly */
  
  /* Cross axis alignment */
  align-items: stretch; /* stretch, flex-start, flex-end, center, baseline */
  
  /* Multi-line alignment */
  align-content: stretch; /* stretch, flex-start, flex-end, center, space-between, space-around */
}

/* Flex Direction Examples */
.row-direction {
  flex-direction: row; /* Default: left to right */
}

.row-reverse-direction {
  flex-direction: row-reverse; /* Right to left */
}

.column-direction {
  flex-direction: column; /* Top to bottom */
}

.column-reverse-direction {
  flex-direction: column-reverse; /* Bottom to top */
}

/* Flex Wrap Examples */
.nowrap-container {
  flex-wrap: nowrap; /* Default: single line */
}

.wrap-container {
  flex-wrap: wrap; /* Multiple lines, top to bottom */
}

.wrap-reverse-container {
  flex-wrap: wrap-reverse; /* Multiple lines, bottom to top */
}

/* Justify Content Examples */
.justify-start {
  justify-content: flex-start; /* Items packed to start */
}

.justify-end {
  justify-content: flex-end; /* Items packed to end */
}

.justify-center {
  justify-content: center; /* Items centered */
}

.justify-between {
  justify-content: space-between; /* Items evenly distributed, first at start, last at end */
}

.justify-around {
  justify-content: space-around; /* Items evenly distributed with equal space around */
}

.justify-evenly {
  justify-content: space-evenly; /* Items evenly distributed with equal space between */
}

/* Align Items Examples */
.align-stretch {
  align-items: stretch; /* Default: stretch to fill container */
}

.align-start {
  align-items: flex-start; /* Items aligned to cross start */
}

.align-end {
  align-items: flex-end; /* Items aligned to cross end */
}

.align-center {
  align-items: center; /* Items centered along cross axis */
}

.align-baseline {
  align-items: baseline; /* Items aligned by their baselines */
}

/* Align Content Examples (for multi-line flex containers) */
.align-content-stretch {
  align-content: stretch; /* Default: lines stretch to take remaining space */
}

.align-content-start {
  align-content: flex-start; /* Lines packed to cross start */
}

.align-content-end {
  align-content: flex-end; /* Lines packed to cross end */
}

.align-content-center {
  align-content: center; /* Lines centered along cross axis */
}

.align-content-between {
  align-content: space-between; /* Lines evenly distributed, first at start, last at end */
}

.align-content-around {
  align-content: space-around; /* Lines evenly distributed with equal space around */
}

/* Flex Flow Shorthand Examples */
.flow-row-wrap {
  flex-flow: row wrap; /* row direction + wrap */
}

.flow-column-nowrap {
  flex-flow: column nowrap; /* column direction + nowrap */
}

.flow-row-reverse-wrap {
  flex-flow: row-reverse wrap; /* row-reverse direction + wrap */
}

/* Practical Examples */

/* Navigation menu */
.nav-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #f8f9fa;
}

/* Card container with wrapping */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* Form layout */
.form-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .form-container {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .form-group {
    flex: 1 1 300px;
  }
}

/* Holy Grail layout */
.holy-grail {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.holy-grail main {
  display: flex;
  flex: 1;
}

.holy-grail .sidebar {
  flex: 0 0 250px;
}

.holy-grail .content {
  flex: 1;
}

/* Media object pattern */
.media {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.media-content {
  flex: 1;
}

/* Input group */
.input-group {
  display: flex;
}

.input-group input {
  flex: 1;
}

.input-group button {
  flex: 0 0 auto;
}

/* Responsive grid with flexbox */
.responsive-grid {
  display: flex;
  flex-wrap: wrap;
  margin: -0.5rem; /* Negative margin to counteract item padding */
}

.responsive-grid-item {
  flex: 1 1 200px;
  margin: 0.5rem;
}

/* Centering content perfectly */
.centered-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Sticky footer layout */
.sticky-footer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.sticky-footer main {
  flex: 1;
}

/* Equal height columns */
.equal-height {
  display: flex;
}

.equal-height .column {
  flex: 1;
}

/* Debugging styles */
.flex-debug {
  border: 1px dashed #ccc;
  padding: 0.5rem;
  margin: 0.25rem;
}

.flex-debug-container {
  border: 2px solid #007bff;
  padding: 1rem;
  background: rgba(0, 123, 255, 0.1);
}

Ready to Try Flex Containers?

Experiment with CSS Flex Container properties in our interactive editor. See how different properties work and practice creating flexible layouts.

< PreviousNext >