CSS Flexbox Patterns

Learn common layout patterns and how to implement them using CSS Flexbox

What are Flexbox Patterns?

Flexbox patterns are reusable layout solutions that solve common design problems using CSS Flexbox. These patterns help you create complex layouts with minimal code while maintaining flexibility and responsiveness.

Common Flexbox Patterns:

  • Holy Grail Layout - Header, footer, and three columns
  • Media Object - Image alongside content
  • Card Layout - Flexible card components
  • Input Groups - Inputs with attached buttons
  • Navigation Patterns - Various menu layouts
  • Split Screen - Dividing the viewport
  • Grid Systems - Responsive grid layouts
  • Masonry Layout - Pinterest-style layout
  • Sticky Footer - Footer that sticks to bottom
  • Centering - Perfect vertical and horizontal centering
Card
Nav
Grid
Form

Flexbox Patterns Reference

PatternDescriptionKey Properties
Holy GrailHeader, footer, content between two sidebarsflex-direction, order, flex
Media ObjectImage alongside content with multiple variationsalign-items, flex-direction
Card LayoutFlexible card components in various arrangementsflex-wrap, flex-direction
Input GroupInput elements with attached buttonsflex: 1, flex: 0 0 auto
NavigationVarious menu and navigation layoutsjustify-content, align-items
Split ScreenDividing the viewport into equal sectionsflex: 1, flex-direction
Grid SystemResponsive grid layoutsflex-wrap, flex-basis
MasonryPinterest-style layout with varying heightsflex-flow: column wrap, align-content
Sticky FooterFooter that sticks to bottom when content is shortflex-direction: column, flex: 1
CenteringPerfect vertical and horizontal centeringjustify-content: center, align-items: center

Flexbox Patterns Implementation Example

Example Code

/* CSS Flexbox Patterns */

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

.holy-grail header,
.holy-grail footer {
  flex: 0 0 auto;
  padding: 1rem;
}

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

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

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

.holy-grail .ads {
  flex: 0 0 200px;
}

@media (max-width: 768px) {
  .holy-grail main {
    flex-direction: column;
  }
  
  .holy-grail .sidebar,
  .holy-grail .ads {
    flex: 0 0 auto;
  }
}

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

.media .media-figure {
  flex: 0 0 auto;
}

.media .media-body {
  flex: 1;
  min-width: 0;
}

.media.media-reverse {
  flex-direction: row-reverse;
}

.media.media-center {
  align-items: center;
}

.media.media-stacked {
  flex-direction: column;
}

@media (max-width: 576px) {
  .media.media-stacked-mobile {
    flex-direction: column;
  }
}

/* 3. Card Layout */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.card .card-header {
  flex: 0 0 auto;
}

.card .card-body {
  flex: 1;
  min-width: 0;
}

.card .card-footer {
  flex: 0 0 auto;
}

.card.card-horizontal {
  flex-direction: row;
}

@media (max-width: 576px) {
  .card.card-horizontal {
    flex-direction: column;
  }
}

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

.input-group .input {
  flex: 1;
  min-width: 0;
}

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

.input-group.input-group-stacked {
  flex-direction: column;
  gap: 0.5rem;
}

@media (max-width: 576px) {
  .input-group.input-group-responsive {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* 5. Navigation Patterns */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.navbar .nav-brand {
  flex: 0 0 auto;
}

.navbar .nav-menu {
  display: flex;
  flex: 1;
  justify-content: center;
}

.navbar .nav-actions {
  flex: 0 0 auto;
  display: flex;
}

.navbar.navbar-stacked {
  flex-direction: column;
  align-items: stretch;
}

.navbar.navbar-stacked .nav-menu {
  flex-direction: column;
}

@media (max-width: 768px) {
  .navbar.navbar-responsive {
    flex-direction: column;
    align-items: stretch;
  }
  
  .navbar.navbar-responsive .nav-menu {
    flex-direction: column;
  }
}

/* 6. Split Screen */
.split-screen {
  display: flex;
  min-height: 100vh;
}

.split-screen .split-half {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.split-screen.split-screen-reversed {
  flex-direction: row-reverse;
}

.split-screen.split-screen-vertical {
  flex-direction: column;
}

@media (max-width: 992px) {
  .split-screen {
    flex-direction: column;
  }
}

/* 7. Grid System */
.flex-grid {
  display: flex;
  flex-wrap: wrap;
  margin: -0.5rem;
}

.flex-grid .col {
  flex: 1 0 0%;
  padding: 0.5rem;
  min-width: 0;
}

.flex-grid .col-1 { flex: 0 0 8.333333%; }
.flex-grid .col-2 { flex: 0 0 16.666667%; }
.flex-grid .col-3 { flex: 0 0 25%; }
.flex-grid .col-4 { flex: 0 0 33.333333%; }
.flex-grid .col-5 { flex: 0 0 41.666667%; }
.flex-grid .col-6 { flex: 0 0 50%; }
.flex-grid .col-7 { flex: 0 0 58.333333%; }
.flex-grid .col-8 { flex: 0 0 66.666667%; }
.flex-grid .col-9 { flex: 0 0 75%; }
.flex-grid .col-10 { flex: 0 0 83.333333%; }
.flex-grid .col-11 { flex: 0 0 91.666667%; }
.flex-grid .col-12 { flex: 0 0 100%; }

@media (max-width: 576px) {
  .flex-grid .col-sm-12 { flex: 0 0 100%; }
}

@media (max-width: 768px) {
  .flex-grid .col-md-6 { flex: 0 0 50%; }
}

/* 8. Masonry Layout */
.masonry {
  display: flex;
  flex-flow: column wrap;
  max-height: 1200px;
}

.masonry .masonry-item {
  width: 33.33%;
  margin-bottom: 1rem;
  break-inside: avoid;
}

.masonry .masonry-item-large {
  width: 66.66%;
}

@media (max-width: 992px) {
  .masonry {
    flex-flow: row wrap;
    max-height: none;
  }
  
  .masonry .masonry-item {
    width: 50%;
  }
}

@media (max-width: 576px) {
  .masonry .masonry-item {
    width: 100%;
  }
}

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

.sticky-footer header {
  flex: 0 0 auto;
}

.sticky-footer main {
  flex: 1;
}

.sticky-footer footer {
  flex: 0 0 auto;
}

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

.centering-container.centering-vertical {
  justify-content: flex-start;
}

.centering-container.centering-horizontal {
  align-items: flex-start;
}

/* 11. Equal Height Columns */
.equal-height {
  display: flex;
}

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

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

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

/* 12. Pricing Table */
.pricing-table {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.pricing-plan {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  max-width: 350px;
}

.pricing-plan .plan-features {
  flex: 1;
}

.pricing-plan.featured {
  transform: scale(1.05);
  z-index: 1;
}

/* 13. Dashboard Layout */
.dashboard {
  display: flex;
  min-height: 100vh;
}

.dashboard .sidebar {
  flex: 0 0 250px;
}

.dashboard .main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.dashboard .main header {
  flex: 0 0 auto;
}

.dashboard .main .content {
  flex: 1;
  display: flex;
}

.dashboard .main .content .widgets {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.dashboard .main .content .widget {
  flex: 1 1 300px;
}

.dashboard .main .content .sidebar-right {
  flex: 0 0 300px;
}

@media (max-width: 1200px) {
  .dashboard {
    flex-direction: column;
  }
  
  .dashboard .sidebar {
    flex: 0 0 auto;
  }
}

/* 14. Responsive Image Gallery */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.gallery .gallery-item {
  flex: 1 1 200px;
  min-width: 0;
}

.gallery .gallery-item-featured {
  flex: 2 1 400px;
}

/* 15. Timeline */
.timeline {
  display: flex;
  flex-direction: column;
}

.timeline .timeline-item {
  display: flex;
  margin-bottom: 2rem;
}

.timeline .timeline-content {
  flex: 1;
  order: 2;
}

.timeline .timeline-marker {
  flex: 0 0 auto;
  order: 1;
  margin: 0 1rem;
}

.timeline .timeline-item:nth-child(even) {
  flex-direction: row-reverse;
}

.timeline .timeline-item:nth-child(even) .timeline-content {
  order: 1;
}

.timeline .timeline-item:nth-child(even) .timeline-marker {
  order: 2;
}

@media (max-width: 768px) {
  .timeline .timeline-item {
    flex-direction: column;
  }
  
  .timeline .timeline-item:nth-child(even) {
    flex-direction: column;
  }
  
  .timeline .timeline-content,
  .timeline .timeline-item:nth-child(even) .timeline-content {
    order: 2;
  }
  
  .timeline .timeline-marker,
  .timeline .timeline-item:nth-child(even) .timeline-marker {
    order: 1;
    margin: 0 0 1rem 0;
  }
}

/* Utility Classes */
.flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-1 { flex: 1; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-stretch { align-items: stretch; }
.items-baseline { align-items: baseline; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }
.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }
.gap-5 { gap: 2rem; }
.order-first { order: -9999; }
.order-last { order: 9999; }
.order-0 { order: 0; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.self-auto { align-self: auto; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-stretch { align-self: stretch; }
.self-baseline { align-self: baseline; }

Flexbox Patterns Concepts in Detail

Layout Patterns

Common layout patterns that solve specific design problems.

Holy Grail - Classic layout with header, footer, and three columns
Media Object - Image alongside text content
Card Layout - Flexible container components
Split Screen - Dividing the viewport into sections

Component Patterns

Reusable component patterns built with Flexbox.

Navigation - Various menu and navigation layouts
Input Groups - Form elements with attached buttons
Grid Systems - Responsive grid layouts
Masonry - Pinterest-style layout with varying heights

Responsive Considerations

Making patterns work across different screen sizes.

Use flex-wrap: wrap for automatic line breaks
Change flex-direction for mobile layouts
Adjust flex-basis for different screen sizes
Use media queries for breakpoint-specific changes

Advanced Techniques

Advanced Flexbox techniques for complex patterns.

order property for visual reordering
align-self for individual item alignment
Negative margin for gutter control in grids
min-width: 0 to prevent overflow issues

Best Practices for Flexbox Patterns

Implementation Tips

  • Start with mobile-first approach for better responsiveness
  • Use semantic HTML structure for accessibility
  • Create reusable utility classes for common patterns
  • Test patterns across different browsers and devices
  • Use CSS custom properties for theming and consistency

Common Mistakes to Avoid

  • Overusing Flexbox when simpler layout methods would work
  • Not considering accessibility when reordering content
  • Forgetting to set min-width: 0 on flex items
  • Creating too many specific patterns instead of reusable ones
  • Not testing responsive behavior at different screen sizes

Accessibility Considerations

  • Ensure proper reading order when using the order property
  • Maintain keyboard navigation order that makes sense
  • Provide adequate contrast in all pattern variations
  • Test with screen readers to ensure content is understandable
  • Consider touch target sizes for mobile interactions

Ready to Try Flexbox Patterns?

Experiment with CSS Flexbox Patterns in our interactive editor. See how different patterns work and practice implementing them in your projects.

< PreviousNext >