Layout Generator

Create responsive layouts visually and generate the corresponding HTML and CSS code. Perfect for prototyping and learning flexbox layouts.

Container Settings

Direction

Gap

Justify Content

Align Items

Sections

Section 1

Section 2

Section 1

Section 2

<div class="container">
    <div class="section"></div>
    <div class="section"></div>
</div>