CSS Flex Ordering

Learn how to control the visual order of flex items without changing the HTML structure

What is CSS Flex Ordering?

The order property in Flexbox allows you to control the visual order of flex items without changing the HTML structure. This is particularly useful for responsive design, accessibility, and creating visually appealing layouts.

Key Concepts of Flex Ordering:

  • Default order value is 0 for all items
  • Items are displayed in ascending order based on their order value
  • Items with the same order value appear in source order
  • Negative values are allowed
  • Does not affect tab order or accessibility tree
2
1
3

Flex Ordering Properties Reference

PropertyDescriptionValues
orderControls the visual order of flex itemsinteger (default: 0)
order-firstMoves the item to the start of the flex containerorder: -9999
order-lastMoves the item to the end of the flex containerorder: 9999
order-noneResets the item’s order to defaultorder: 0
order-[1...12]Utility classes to set specific orderingorder-1, order-2, ..., order-12
order-[<number>]Allows custom values using arbitrary variantsorder-[5], order-[-2], etc.

Flex Ordering Concepts in Detail

How Order Works

The order property controls the visual order of flex items within their container.

Items are displayed in ascending order based on their order value
Items with the same order value appear in source order
Negative values are allowed and appear before items with positive values
The default order value is 0 for all items

Responsive Ordering

Order is particularly useful for creating responsive layouts that adapt to different screen sizes.

Change item order based on screen size with media queries
Move important content to the top on mobile devices
Reorder navigation elements for better mobile experience
Highlight featured content differently on various screen sizes

Accessibility Considerations

While order changes visual presentation, it doesn't change the DOM order.

Screen readers and keyboard navigation follow source order, not visual order
Use caution when reordering content that affects meaning
Ensure the reading order makes sense for accessibility
Test with screen readers and keyboard navigation

Practical Use Cases

Order property is useful in various real-world scenarios.

Responsive navigation reordering
Highlighting featured content
Form layout optimization for different screens
Creating visual hierarchies without changing HTML

Best Practices for Flex Ordering

Effective Use of Order

  • Use for visual reordering without affecting accessibility
  • Create responsive layouts that adapt to different screen sizes
  • Highlight important content by moving it to prominent positions
  • Optimize form layouts for better user experience
  • Use consistent ordering patterns across your application

Common Mistakes to Avoid

  • Overusing order when CSS Grid might be more appropriate
  • Creating confusing reading orders for screen readers
  • Using extreme values unnecessarily
  • Not testing the resulting layout across different screen sizes
  • Forgetting that order doesn't change tab order

Accessibility Considerations

  • Remember that order only affects visual presentation, not source order
  • Screen readers and keyboard navigation follow the DOM order
  • Ensure the reading order makes logical sense
  • Test with screen readers to ensure content is understandable
  • Use skip links and other accessibility features when needed

Flex Ordering Implementation Example

Example Code

/* CSS Flex Ordering Properties */

/* Basic Order Property */
.flex-item {
  order: 0; /* Default value */
}

/* Order Examples */
.order-first {
  order: -1; /* Appears first */
}

.order-last {
  order: 9999; /* Appears last (any high number) */
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

/* Responsive Ordering */
@media (max-width: 768px) {
  .mobile-order-first {
    order: -1;
  }
  
  .mobile-order-last {
    order: 9999;
  }
}

/* Visual reordering without changing HTML structure */
.card-featured {
  order: -1; /* Featured card comes first */
}

.card-secondary {
  order: 1; /* Secondary cards come after */
}

/* Navigation reordering */
.nav-logo {
  order: 1;
}

.nav-menu {
  order: 2;
}

.nav-search {
  order: 3;
}

.nav-auth {
  order: 4;
}

@media (max-width: 768px) {
  .nav-logo {
    order: 1;
  }
  
  .nav-menu {
    order: 3;
  }
  
  .nav-search {
    order: 4;
  }
  
  .nav-auth {
    order: 2;
  }
}

/* Form reordering */
.form-group {
  order: 1;
}

.form-actions {
  order: 2;
}

.form-sidebar {
  order: 3;
}

@media (max-width: 1024px) {
  .form-group {
    order: 1;
  }
  
  .form-actions {
    order: 3;
  }
  
  .form-sidebar {
    order: 2;
  }
}

/* Card layout reordering */
.card-container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  flex: 1 1 300px;
}

.card-highlight {
  order: -1;
  flex-basis: 100%;
}

/* Masonry layout with ordering */
.masonry {
  display: flex;
  flex-flow: column wrap;
  max-height: 1200px;
}

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

.masonry-large {
  order: -1;
  width: 66.66%;
}

/* Pricing table reordering */
.pricing-basic {
  order: 1;
}

.pricing-pro {
  order: 2;
}

.pricing-enterprise {
  order: 3;
}

.pricing-featured {
  order: 0; /* Featured plan comes first */
  transform: scale(1.05);
}

/* Image gallery with featured image */
.gallery {
  display: flex;
  flex-wrap: wrap;
}

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

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

/* Reordering for accessibility */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  order: -9999; /* Ensure skip link appears first for accessibility */
}

.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Complex ordering patterns */
.complex-order .item-a {
  order: 3;
}

.complex-order .item-b {
  order: 1;
}

.complex-order .item-c {
  order: 4;
}

.complex-order .item-d {
  order: 2;
}

.complex-order .item-e {
  order: 5;
}

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

.debug-order::before {
  content: "Order: " attr(data-order);
  display: block;
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 0.5rem;
}

/* Practical Examples */

/* Navigation with responsive reordering */
.responsive-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.responsive-nav .logo {
  order: 1;
}

.responsive-nav .menu {
  order: 2;
  flex: 1;
}

.responsive-nav .search {
  order: 3;
}

.responsive-nav .auth {
  order: 4;
}

@media (max-width: 768px) {
  .responsive-nav {
    flex-direction: column;
  }
  
  .responsive-nav .logo {
    order: 1;
  }
  
  .responsive-nav .menu {
    order: 3;
  }
  
  .responsive-nav .search {
    order: 4;
  }
  
  .responsive-nav .auth {
    order: 2;
  }
}

/* Card layout with featured card */
.card-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card-layout .card {
  flex: 1 1 300px;
}

.card-layout .featured {
  order: -1;
  flex: 1 1 100%;
}

/* Form layout with conditional reordering */
.form-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.form-layout .main {
  order: 1;
  flex: 2 1 600px;
}

.form-layout .sidebar {
  order: 2;
  flex: 1 1 300px;
}

.form-layout .actions {
  order: 3;
  flex: 1 1 100%;
}

@media (max-width: 1024px) {
  .form-layout .main {
    order: 1;
  }
  
  .form-layout .sidebar {
    order: 3;
  }
  
  .form-layout .actions {
    order: 2;
  }
}

/* Product grid with promoted items */
.product-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.product-grid .product {
  flex: 1 1 200px;
}

.product-grid .promoted {
  order: -1;
  flex: 1 1 300px;
}

/* Timeline with reverse ordering */
.timeline {
  display: flex;
  flex-direction: column;
}

.timeline.reversed {
  flex-direction: column-reverse;
}

.timeline .event {
  order: var(--event-order, 0);
}

/* Dashboard widget reordering */
.dashboard {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

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

.dashboard .primary {
  order: 1;
}

.dashboard .secondary {
  order: 2;
}

.dashboard .tertiary {
  order: 3;
}

@media (max-width: 768px) {
  .dashboard .primary {
    order: 1;
  }
  
  .dashboard .secondary {
    order: 3;
  }
  
  .dashboard .tertiary {
    order: 2;
  }
}

Ready to Try Flex Ordering?

Experiment with CSS Flex Ordering properties in our interactive editor. See how different order values work and practice creating responsive layouts.

< PreviousNext >