Container Properties

Layout Presets

Preview

3 items
1
2
3

Click an item to edit its properties. Click again to deselect.

Generated CSS

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

.flex-item {
  /* Base item styles */
}

/* No custom item styles */

Flexbox Quick Reference

Container (Parent)

  • flex-direction: Main axis direction
  • flex-wrap: Allow wrapping to new lines
  • justify-content: Main axis alignment
  • align-items: Cross axis alignment
  • align-content: Multi-line cross axis
  • gap: Space between items

Items (Children)

  • order: Visual order (default: 0)
  • flex-grow: Grow factor (default: 0)
  • flex-shrink: Shrink factor (default: 1)
  • flex-basis: Initial size (default: auto)
  • align-self: Override align-items

Common Patterns

  • Center everything: justify-content: center; align-items: center
  • Equal spacing: justify-content: space-between
  • Fill space: flex-grow: 1
  • Fixed sidebar: flex-basis: 200px; flex-shrink: 0