Flexbox Playground

Construisez des layouts flexbox visuellement. Controlez direction, justify, align, wrap, gap et les proprietes de chaque item.

Presets

Direction

Justify

Align

Wrap

Gap: 16px

3 itemsClick an item to edit its flex properties

Show Tailwindflex-rowjustify-startitems-stretch

CSS

display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 16px;

Tailwind CSS

<div class="flex flex-row justify-start items-stretch flex-nowrap gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Explorer d'autres Goodies

D'autres outils gratuits par Eguth Studio qui pourraient vous plaire.

Voir tous les Goodies

Layout

Generateur de grilles CSS

Construisez des grilles CSS visuellement. Ajustez colonnes, lignes et espacements, puis copiez le code.

Try it ->

Layout

Previsualisation border-radius

Visualisez et ajustez des valeurs complexes de border-radius sur un apercu en direct.

Echelle typographique

Generez une echelle typographique responsive a partir d'une taille de base et d'un ratio. Export CSS variables, clamp() fluid et config Tailwind.

Try it ->

NewLayout

Generateur de systeme d'espacement

Construisez une echelle d'espacement coherente a partir d'une unite de base. Generez des echelles lineaires, geometriques ou Fibonacci avec CSS variables et config Tailwind.

Try it ->

NewLayout

CSS Transform Playground

Combinez des transforms CSS 2D et 3D visuellement — translate, rotate, scale, skew et perspective avec apercu en direct et controle du transform-origin.

Calculateur Clamp

Generez des valeurs CSS clamp() responsives pour la typographie et l'espacement fluides. Definissez viewport et valeurs min/max, previsualisation a chaque breakpoint.

Try it ->

Voir tous les Goodies