CSS Flexbox Generator
Visually design, experiment, and export responsive CSS Flexbox layouts. Live visual axis overlays, drag & drop reordering, Tailwind utilities, SCSS, React JSX, and preset galleries.
Loading Flexbox Studio Engine...
CSS Flexbox Masterclass & Learning Guide
Understand how main axis, cross axis, justify-content, align-items, and flex sizing work under the hood.
1. Main Axis (justify-content)
The Main Axis is defined by the flex-direction property (e.g., row = horizontal left-to-right, column = vertical top-to-bottom). All justify-content properties distribute items along this main axis.
justify-content: flex-start | center | flex-end | space-between | space-around
2. Cross Axis (align-items)
The Cross Axis runs perpendicular to the main axis. Controls like align-items and align-self align items crosswise across the container line.
align-items: stretch | flex-start | center | flex-end | baseline
justify-content vs. align-items Summary
| Property | Target Axis | Primary Purpose | Common Values |
|---|---|---|---|
| justify-content | Main Axis | Distribute extra space along item direction | space-between, center, flex-end |
| align-items | Cross Axis | Align items within a single line vertically/crosswise | center, stretch, flex-start |
| align-content | Cross Axis (Multi-line) | Distribute multi-line flex rows across height | space-between, stretch, center |
| align-self | Cross Axis (Single Item) | Override container align-items for one item | center, flex-end, stretch |
The Flex Sizing Formula (flex: grow shrink basis)
The flex shorthand syntax sets flex-grow, flex-shrink, and flex-basis simultaneously:
- flex: 1 (equal grow) →
flex: 1 1 0%(Items expand equally to consume all remaining space). - flex: auto →
flex: 1 1 auto(Items grow according to content size). - flex: none →
flex: 0 0 auto(Items remain completely fixed size without growing or shrinking).
Related Tools
Color Contrast Checker
Measure color contrast between foreground and background colors in HEX, RGB, or HSL according to WCAG 2.1 and 2.2 guidelines. Includes AA/AAA ratings, live previews, and accessible suggestions.
HEX ↔ RGB Converter
Convert color codes instantly between HEX, HEX with Alpha, RGB, RGBA, HSL, and CMYK formats. Features live visual previews, color channel breakdown, copyable CSS snippets, and history. 100% free & client-side.
RGB ↔ HSL Converter
Convert colors instantly between RGB, RGBA, HSL, and HSLA formats online. Features live visual previews, interactive channel sliders, copyable CSS declarations, and history. 100% free & client-side.
RGB ↔ CMYK Converter
Convert colours instantly between RGB, RGBA, and CMYK formats online. Features live visual previews, print ink channel sliders, copyable CSS declarations, and print guidance. 100% free & client-side.
Related Tools
Color Contrast Checker
Measure color contrast between foreground and background colors in HEX, RGB, or HSL according to WCAG 2.1 and 2.2 guidelines. Includes AA/AAA ratings, live previews, and accessible suggestions.
HEX ↔ RGB Converter
Convert color codes instantly between HEX, HEX with Alpha, RGB, RGBA, HSL, and CMYK formats. Features live visual previews, color channel breakdown, copyable CSS snippets, and history. 100% free & client-side.
RGB ↔ HSL Converter
Convert colors instantly between RGB, RGBA, HSL, and HSLA formats online. Features live visual previews, interactive channel sliders, copyable CSS declarations, and history. 100% free & client-side.
RGB ↔ CMYK Converter
Convert colours instantly between RGB, RGBA, and CMYK formats online. Features live visual previews, print ink channel sliders, copyable CSS declarations, and print guidance. 100% free & client-side.