CSS Fundamentals Selectors CSS Box Model Layout CSS Flexbox Layout CSS Grid Layout System CSS Typography Text Styling CSS Colors Backgrounds CSS Positioning Methods CSS Animations Transitions CSS Responsive Design CSS Custom Properties Variables CSS Transforms 3D Effects CSS Filters Effects CSS Pseudo Elements Content CSS Scroll Behavior Snap CSS Shapes Clip Path CSS Modern Layout Techniques CSS Accessibility Focus States CSS Dark Mode Theming CSS Performance Optimization CSS Utility Classes System

Back to Lessons

CSS Flexbox Layout

April 5, 2026

Flexbox One-Dimensional Layout

Perfect for navigation bars, card layouts, centering.

Flex Container Properties

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

Flex Item Properties

.item {
  flex: 1; /* grow shrink basis */
  flex-grow: 2;
  flex-shrink: 0;
  align-self: flex-end;
  order: 1;
}

Common Patterns

center: justify-content: center; align-items: center
navbar: justify-content: space-between
cards: flex-wrap: wrap; gap: 20px

Previous Lesson Next Lesson