📐CSS Grid & Flexbox Playground

Master modern CSS layouts with interactive, real-time experimentation. See how Flexbox and Grid properties work as you adjust them.

Layout System

Master Flexbox properties with real-time visual feedback

Interactive Playground

🎯 Experiment with Flexbox! Adjust the properties below and watch the layout respond in real-time. Flexbox is perfect for one-dimensional layouts (row or column).

flex-direction

flex-wrap

justify-content

align-items

align-content

gap: 1rem

Live Preview

Generated CSS:

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: flex-start;
  gap: 1rem;
}

Code Reference

CSS Properties

1/* Flexbox is a one-dimensional layout system */
2.container {
3  display: flex;
4  
5  /* Main axis direction */
6  flex-direction: row; /* row | column | row-reverse | column-reverse */
7  
8  /* Wrapping behavior */
9  flex-wrap: nowrap; /* nowrap | wrap | wrap-reverse */
10  
11  /* Main axis alignment */
12  justify-content: flex-start;
13  /* flex-start | flex-end | center | 
14     space-between | space-around | space-evenly */
15  
16  /* Cross axis alignment */
17  align-items: stretch;
18  /* flex-start | flex-end | center | stretch | baseline */
19  
20  /* Multi-line cross axis alignment */
21  align-content: flex-start;
22  /* flex-start | flex-end | center | stretch |
23     space-between | space-around */
24  
25  /* Spacing between items */
26  gap: 1rem;
27}

📚 How It Works

Flexbox is designed for one-dimensional layouts - either a row or a column. The container has a "main axis" (determined by flex-direction) and a "cross axis" (perpendicular to main). - **justify-content**: aligns items along the main axis - **align-items**: aligns items along the cross axis - **align-content**: aligns multiple lines (only works with flex-wrap) Try different combinations to see how they interact!

💡 Key Learnings

→Flexbox works in one dimension at a time (row OR column)
→flex-direction sets the main axis (horizontal or vertical)
→justify-content controls spacing along the main axis
→align-items controls alignment along the cross axis
→flex-wrap allows items to wrap to new lines
→align-content only matters when you have multiple lines
→gap is the modern way to add spacing (replaces margin hacks)

🤔 When to Use Which?

📦 Use Flexbox When:

• You need one-dimensional layout (row OR column)
• Content size determines layout
• Navigation bars, toolbars, button groups
• Centering items easily
• Equal-height columns

🎛️ Use Grid When:

• You need two-dimensional layout (rows AND columns)
• Layout structure is predetermined
• Page layouts, galleries, dashboards
• Overlapping elements
• Complex responsive designs

💡 Pro tip: You can use both together! Grid for the overall page layout, Flexbox for components.