CSS Flexbox Generator
Visually build flexbox layouts and copy the CSS.
gap8px
1
2
3
4
CSS
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;
}Mastering flexbox layouts
Flexbox lays out items along a main axis set by flex-direction. justify-content distributes them along that axis, align-items positions them on the cross axis, and flex-wrap controls overflow onto new lines. Tweak the controls, watch the live boxes rearrange, and copy the CSS — generated entirely in your browser.
Related Design & CSS tools
Color Converter
Convert a color to HEX, RGB, HSL, HSB, and CMYK at once.
HEX to RGB
Convert HEX color codes to RGB / RGBA values.
RGB to HEX
Convert RGB values into HEX color codes.
CSS Box Shadow Generator
Visually design CSS box-shadow with a live preview and code.
CSS Border Radius Generator
Visually craft border-radius with a live preview.
HEX to CMYK
Convert HEX colors to CMYK print values.
CMYK to HEX
Convert CMYK print values to HEX colors.
HEX to HSB
Convert HEX colors to HSB / HSV values.