Logique LogoLogique

Interactive CSS Flexbox Playground

CSS Flexbox revolutionized the way we build web layouts, making it easier than ever to create responsive, dynamic designs. Whether you're just starting with web development or looking to deepen your CSS expertise, our interactive Flexbox Playground helps you master flexible box layouts through hands-on experimentation. Adjust properties in real-time and watch as your layout transforms, helping you understand the powerful capabilities of Flexbox. Perfect for both beginners learning the basics and experienced developers looking to fine-tune their layout skills.

Interactive Playground

1
2
3

Flexbox Properties Quick Reference

Container Properties (Parent Element)

display: flex

Creates a flex formatting context, establishing a flexible container that enables powerful alignment and distribution capabilities for its children. This is the foundational property that activates Flexbox layout.

Values:
  • flexCreates a block-level flex container
  • inline-flexCreates an inline-level flex container that flows with text
Example:
.container {
  display: flex; /* Enables flexbox layout system */
}

flex-direction

Establishes the main axis of the container, determining the primary direction in which flex items are laid out. This property fundamentally affects how content flows within your layout.

Values:
  • rowItems flow horizontally from left to right (default behavior in left-to-right languages)
  • row-reverseItems flow horizontally from right to left, useful for right-to-left language layouts
  • columnItems flow vertically from top to bottom, ideal for vertical layouts and mobile designs
  • column-reverseItems flow vertically from bottom to top, useful for specialized interface layouts
Example:
.container {
  display: flex;
  flex-direction: column; /* Creates a vertical layout */
}

justify-content

Controls the alignment and distribution of space between and around flex items along the main axis. This property is crucial for creating balanced, well-spaced layouts.

Values:
  • flex-startPacks items toward the start of the main axis (default behavior)
  • flex-endPacks items toward the end of the main axis
  • centerCenters items along the main axis, perfect for horizontal/vertical centering
  • space-betweenDistributes items evenly with the first item at the start and last item at the end
  • space-aroundDistributes items with equal space around them, including half-spaces at the edges
  • space-evenlyDistributes items with equal space between them, including full spaces at the edges
Example:
.container {
  display: flex;
  justify-content: space-between; /* Evenly distributes items */
}

align-items

Determines how flex items are positioned along the cross axis, enabling precise vertical alignment in row layouts or horizontal alignment in column layouts.

Values:
  • stretchItems stretch to fill the container's cross axis (default behavior)
  • flex-startItems align at the start of the cross axis
  • flex-endItems align at the end of the cross axis
  • centerItems center along the cross axis
  • baselineItems align by their textual baseline, useful for content with varying font sizes
Example:
.container {
  display: flex;
  align-items: center; /* Vertically centers items in a row layout */
}

gap

Creates consistent spacing between flex items without using margins, providing cleaner and more maintainable spacing solutions.

Values:
  • <length>Fixed-size gaps using units like px, rem, or em
  • <percentage>Gaps that scale relative to the container's size
Example:
.container {
  display: flex;
  gap: 1rem; /* Creates consistent 1rem gaps between items */
}

Item Properties (Child Elements)

flex-grow

Determines how much an item will grow relative to other items when extra space is available in the container. This property is essential for creating flexible, responsive layouts.

Values:
  • 0Item maintains its original size (default behavior)
  • <number>Item grows proportionally to other items, taking up available space
Example:
.item {
  flex-grow: 1; /* Item will grow to fill available space */
}

flex-shrink

Controls how much an item will shrink relative to other items when there isn't enough space in the container, crucial for responsive design.

Values:
  • 1Item will shrink proportionally when needed (default behavior)
  • 0Item will not shrink below its flex-basis size
  • <number>Item shrinks proportionally to this factor compared to other items
Example:
.item {
  flex-shrink: 0; /* Prevents item from shrinking */
}

flex-basis

Sets the initial main size of a flex item before remaining space is distributed. This property helps establish consistent sizing across flex items.

Values:
  • autoItem sizes based on its content (default behavior)
  • <length>Fixed initial size using specific units
  • <percentage>Initial size relative to the container
Example:
.item {
  flex-basis: 200px; /* Sets initial width/height to 200px */
}

align-self

Overrides the container's align-items property for individual items, allowing for unique alignment of specific elements.

Values:
  • autoInherits the container's align-items value (default behavior)
  • flex-startAligns item to the start of the cross axis
  • flex-endAligns item to the end of the cross axis
  • centerCenters item along the cross axis
  • stretchStretches item to fill the cross axis
Example:
.special-item {
  align-self: flex-start; /* Aligns this item differently from its siblings */
}

🚀 Learn to Code or Level Up Your Skills

Whether you're just starting out or looking to sharpen your web development skills, we've got free coding courses to help you grow!

  • Beginner-friendly lessons—perfect if you've never coded before.
  • Advanced topics for developers who want to go deeper.
  • Real-world projects to build your portfolio.
  • 100% free—no sign-ups, no catch.
Explore Free Courses