Color format converter
Convert HEX, RGB and HSL colors with alpha transparency, preview the swatch and copy ready-to-use CSS color values.
CSS Flexbox layout generator
Explore flex direction, wrapping, spacing and alignment in a live layout, with ready-to-copy CSS and HTML.
About this tool
Work out how a row of controls should wrap and align before adding the rules to a component.
How to use
Choose direction, wrapping, main-axis distribution and cross-axis alignment. Adjust the gap and number of items, then vary the preview width to see how wrapping changes. Switch between CSS and HTML to copy or download both parts.
The preview uses the same flex properties as the output. Items start with a 100 px basis and an 80 px minimum height; customize these for your content. Supports up to 48 items and gaps from 0 to 80 px. Preview width is not included in the exported CSS.
Common questions
Is the preview width part of the exported layout?
No. It only simulates available space. Export includes the chosen flex rules and basic item sizing; set the container width and content styles in your own page.
Why does centering behave differently after switching to column?
justify-content works on the main axis and align-items on the cross axis. With row, the main axis is horizontal; with column, it is vertical. To center items on both axes, select center for both controls and give the container enough space on the relevant axes.
Related tools
Opens in a new tab
Comments
0