Flexbox Generator

Create and customize flexbox layouts visually. Design responsive layouts and generate the corresponding HTML and CSS code.

Flexbox Presets

Container Settings

Direction

Wrap

Justify Content

Align Items

Align Content

Gap

Flex Items

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

<div class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
</div>