CSS Flex Items

Learn how to use Flex Item properties to control individual items within a flex container

What are CSS Flex Items?

Flex items are the direct children of a flex container. While the flex container properties control the overall layout, flex item properties allow you to customize the behavior of individual items within the container.

Flex Item Properties:

order - Controls the visual order of items
flex-grow - Defines the ability to grow relative to others
flex-shrink - Defines the ability to shrink relative to others
flex-basis - Sets the initial size before growing/shrinking
flex - Shorthand for grow, shrink, and basis
align-self - Overrides container's align-items for individual items

Grow: 2

Flex Items Properties Reference

Property	Description	Values
order	Controls the visual order of items	integer (default: 0)
flex-grow	Ability to grow relative to others	number (default: 0)
flex-shrink	Ability to shrink relative to others	number (default: 1)
flex-basis	Initial size before growing/shrinking	length, auto, content (default: auto)
flex	Shorthand for grow, shrink, and basis	grow shrink basis (default: 0 1 auto)
align-self	Overrides container's align-items	auto, stretch, flex-start, flex-end, center, baseline (default: auto)

Flex Items Concepts in Detail

Growing and Shrinking

Flex items can grow to fill available space or shrink to prevent overflow.

flex-grow - Distributes available space proportionally

flex-shrink - Reduces size to prevent overflow

flex-basis - Sets the starting point for growing/shrinking

Negative space triggers shrinking, positive space triggers growing

Order and Alignment

Control the visual order and alignment of individual items.

order - Changes visual order without affecting HTML

align-self - Overrides container alignment for specific items

Lower order values appear first, higher values appear later

align-self: auto respects the container's align-items value

Flex Shorthand

The flex shorthand property combines grow, shrink, and basis.

flex: initial - Same as flex: 0 1 auto

flex: auto - Same as flex: 1 1 auto

flex: none - Same as flex: 0 0 auto

flex: number - Same as flex: number 1 0%

Common Use Cases

Practical applications of flex item properties.

Fixed sidebars with flex: 0 0 width

Flexible content areas with flex: 1

Responsive reordering with the order property

Individual alignment overrides with align-self

Best Practices for Flex Items

Layout & Responsive Design

Use flex-grow for proportional distribution of available space
Use flex-shrink: 0 for items that should maintain their size
Use flex-basis instead of width for more flexible layouts
Use the flex shorthand for better maintainability
Use order for visual reordering without affecting accessibility

Common Mistakes to Avoid

Using fixed widths instead of flex-basis
Overusing order which can create accessibility issues
Not understanding the difference between flex-grow and flex-shrink
Using align-self unnecessarily when align-items would suffice
Forgetting that flex-basis has higher priority than width/height

Accessibility Considerations

Be cautious with order as it only affects visual order, not tab order
Ensure content remains logical when read by screen readers
Test keyboard navigation through reordered content
Consider how your layout responds to text zooming
Ensure sufficient color contrast in flex components

Flex Items Implementation Example

Example Code

/* CSS Flex Items Properties */

/* Flex Item Basics */
.flex-item {
  /* Order of appearance */
  order: 0; /* Default value, integer */
  
  /* Ability to grow */
  flex-grow: 0; /* Default 0, unitless number */
  
  /* Ability to shrink */
  flex-shrink: 1; /* Default 1, unitless number */
  
  /* Initial size before growing/shrinking */
  flex-basis: auto; /* Default auto, can be length or content */
  
  /* Shorthand for flex-grow, flex-shrink, flex-basis */
  flex: 0 1 auto; /* Default values */
  
  /* Override container's align-items */
  align-self: auto; /* Default auto, can be stretch, flex-start, flex-end, center, baseline */
}

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

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

.order-custom {
  order: 5; /* Custom order value */
}

/* Flex Grow Examples */
.grow-0 {
  flex-grow: 0; /* Won't grow (default) */
}

.grow-1 {
  flex-grow: 1; /* Will grow to fill available space */
}

.grow-2 {
  flex-grow: 2; /* Will grow twice as much as items with flex-grow: 1 */
}

/* Flex Shrink Examples */
.shrink-0 {
  flex-shrink: 0; /* Won't shrink (maintains size) */
}

.shrink-1 {
  flex-shrink: 1; /* Will shrink (default) */
}

.shrink-2 {
  flex-shrink: 2; /* Will shrink twice as much as items with flex-shrink: 1 */
}

/* Flex Basis Examples */
.basis-auto {
  flex-basis: auto; /* Default, size based on content */
}

.basis-100 {
  flex-basis: 100px; /* Fixed size of 100px */
}

.basis-50 {
  flex-basis: 50%; /* Percentage-based size */
}

.basis-content {
  flex-basis: content; /* Size based on content */
}

/* Flex Shorthand Examples */
.flex-initial {
  flex: 0 1 auto; /* Initial value (same as default) */
}

.flex-auto {
  flex: 1 1 auto; /* Grows and shrinks, size based on content */
}

.flex-none {
  flex: 0 0 auto; /* No growing or shrinking, size based on content */
}

.flex-1 {
  flex: 1 1 0%; /* Grows and shrinks, starting at 0 width */
}

.flex-2 {
  flex: 2 1 0%; /* Grows twice as much, shrinks, starting at 0 width */
}

/* Align Self Examples */
.self-auto {
  align-self: auto; /* Default, follows align-items */
}

.self-start {
  align-self: flex-start; /* Aligns to start of cross axis */
}

.self-end {
  align-self: flex-end; /* Aligns to end of cross axis */
}

.self-center {
  align-self: center; /* Centers along cross axis */
}

.self-stretch {
  align-self: stretch; /* Stretches to fill cross axis */
}

.self-baseline {
  align-self: baseline; /* Aligns to text baseline */
}

/* Practical Examples */

/* Navigation with special item */
.nav-special .special-item {
  order: -1; /* Move to beginning */
  flex-grow: 2; /* Take more space */
  background-color: #ff6b6b;
}

/* Card with fixed sidebar */
.card-with-sidebar {
  display: flex;
}

.card-sidebar {
  flex: 0 0 250px; /* Don&apos;t grow, Don&apos;t shrink, fixed width */
}

.card-content {
  flex: 1; /* Take remaining space */
}

/* Responsive image gallery */
.image-gallery {
  display: flex;
  flex-wrap: wrap;
}

.gallery-item {
  flex: 1 1 200px; /* Grow, shrink, start at 200px */
}

.gallery-featured {
  flex: 2 1 300px; /* Featured item takes more space */
}

/* Form layout with flexible inputs */
.form-group {
  display: flex;
  gap: 1rem;
}

.form-input {
  flex: 1; /* All inputs take equal space */
}

.form-input-large {
  flex: 2; /* This input takes twice the space */
}

/* Media object with fixed image */
.media-object {
  display: flex;
  align-items: flex-start;
}

.media-image {
  flex: 0 0 100px; /* Fixed width image */
}

.media-content {
  flex: 1; /* Content takes remaining space */
}

/* Pricing cards with emphasized plan */
.pricing-card {
  flex: 1 1 250px;
}

.pricing-featured {
  order: -1; /* Move to beginning */
  flex-grow: 1.2; /* Slightly larger */
  align-self: stretch; /* Stretch to full height */
}

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

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

.holy-grail .sidebar {
  flex: 0 0 200px; /* Fixed width sidebars */
}

.holy-grail .content {
  flex: 1; /* Content takes remaining space */
}

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

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

.masonry-item-large {
  order: -1; /* Show larger items first */
  width: 66.66%;
}

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

.input-group input {
  flex: 1; /* Input takes available space */
}

.input-group button {
  flex: 0 0 auto; /* Button doesn't grow or shrink */
}

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

.debug-grow {
  background-color: rgba(46, 204, 113, 0.2);
}

.debug-shrink {
  background-color: rgba(241, 196, 15, 0.2);
}

.debug-basis {
  background-color: rgba(52, 152, 219, 0.2);
}

Ready to Try Flex Items?

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

< Previous Next >