ToolsRail

Tailwind Flexbox Builder

Design and experiment with Flexbox layouts using Tailwind CSS classes

Controls

Flex Container

? Enable or disable flex container

Direction

? Set the main axis direction

Wrap

? Control how items wrap to new lines

Justify Content

? Align items along the main axis

Align Items

? Align items along the cross axis

Align Content

? Align multiple lines of content

Gap

? Space between flex items

Container Size

? Set container width and height

Item Controls

? Control number of items and their appearance

Special Controls

? Show grid lines for debugging
? Toggle dark/light theme

Responsive

? Apply different settings at breakpoints

Live Preview

1
2
3

Item Properties

Item 1

Generated Code

flex flex-row flex-wrap items-center justify-center