Flexbox

Flexbox. Use Flexbox on your input. Configure Direction, Main-axis alignment, Gap (px) and inspect the result before copying it.

Processed locally · Files stay on your device

Text and transformation

Runs in this browser

Set the inputs and run the tool to view the result.

Review the populated example and the input units, then replace it with your data.
Use Flexbox on your input. Configure Direction, Main-axis alignment, Gap (px) and inspect the result before copying it.
Run the tool, inspect the result, then copy or download what you need.

Use Flexbox on your input. Configure Direction, Main-axis alignment, Gap (px) and inspect the result before copying it.

Edit the example or paste your own content.

Direction: row
Main-axis alignment: space-between
Gap (px): 16

How does Flexbox determine the result?

Use Flexbox on your input. Configure Direction, Main-axis alignment, Gap (px) and inspect the result before copying it.

What should I check before processing?

Edit the example or paste your own content.

How can I verify the output?

Use the supplied example as a check, then compare important results with the original source or business document.

Direction: row
Main-axis alignment: space-between
Gap (px): 16

Calculate with Pixel value (px), Root font size (px); review the formula, units and worked example.

Calculate with Pixel value (px), Parent font size (px); review the formula, units and worked example.

Calculate with Pixel value (px), Viewport size (px); review the formula, units and worked example.

Calculate with Width, Height; review the formula, units and worked example.

Use Regex Test on your input. Configure Input text, Regular expression, Flags and inspect the result before copying it.

Use Regex Escape on your input. Configure Input text and inspect the result before copying it.