Copiar 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>Playground de Flexbox en CSS
Construye layouts flexibles con controles visuales para el contenedor y las propiedades individuales de cada ítem, y copia el HTML, CSS o Tailwind resultante.
HTML
Tailwind CSS
Copiar Tailwind
Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.
<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
Copiar 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;
}
}