Copy HTML
<div class="flexbox">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>CSS Flexbox playground
Build flexible layouts with visual controls for the container and each item’s individual properties, then copy the resulting HTML, CSS, or Tailwind.
HTML
Tailwind CSS
Copy Tailwind
Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.
<div class="flex bg-orange-100 min-block-[20rem] gap-[16px]">
<div class="min-inline-14 min-block-14 bg-blue-600 text-white">1</div>
<div class="min-inline-14 min-block-14 bg-blue-600 text-white">2</div>
<div class="min-inline-14 min-block-14 bg-blue-600 text-white">3</div>
<div class="min-inline-14 min-block-14 bg-blue-600 text-white">4</div>
</div>CSS
Copy CSS
.flexbox {
display: flex;
background-color: #ffedd5;
min-block-size: 20rem;
gap: 16px;
}
.flexbox > * {
min-inline-size: 3.5rem;
min-block-size: 3.5rem;
background-color: #2563eb;
color: #ffffff;
}.flexbox {
display: flex;
background-color: #ffedd5;
min-block-size: 20rem;
gap: 16px;
> * {
min-inline-size: 3.5rem;
min-block-size: 3.5rem;
background-color: #2563eb;
color: #ffffff;
}
}