Langsung ke konten utama
LibraTool logoLibraTool

Generator CSS Flexbox gratis

Eksperimen dengan flex direction, wrap, justify dan align pada item langsung — dan salin CSS.

Berfungsi offline setelah dimuat
Preset

Tip: klik item di pratinjau untuk toggle flex-grow: 1 padanya.

Pratinjau langsung
css
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

🔒 Semuanya berjalan di browser Anda — tidak ada yang diunggah.

Cara kerja

Playground flexbox interaktif: alihkan flex-direction, wrap, justify-content, dan align-items dan lihat hingga 10 item langsung mengatur ulang secara instan. Klik item mana pun untuk memberinya flex-grow: 1 dan lihat bagaimana ia mengklaim ruang. CSS diperbarui langsung, siap disalin ke proyek Anda.

  1. 1
    Atur kontainer
    Arah, wrap, justify-content, align-items, gap.
  2. 2
    Tambahkan item
    Satu hingga sepuluh item flex bernomor.
  3. 3
    Bereksperimen
    Klik item untuk mengalihkan flex-grow dan lihat efeknya.
  4. 4
    Salin CSS-nya
    Aturan kontainer (dan item), siap ditempel.

Semuanya berjalan di browser Anda — tidak ada yang diunggah.

Alat terkait

🟦

Generator CSS Grid

Desain CSS grid secara visual — track, unit, dan gap — lalu salin CSS dan HTML yang dihasilkan.

Coba
🌈

Generator Gradien CSS

Buat gradien CSS linear, radial, dan konik dengan pratinjau langsung. Salin CSS dengan satu klik.

Coba
🎨

Generator Box Shadow CSS

Pembangun visual untuk box-shadow CSS dengan pratinjau langsung, penumpukan multi-lapisan, pemilih warna, toggle inset, dan salin satu klik. Termasuk prasetel Material, neumorphism, dan glow.

Coba

Pertanyaan yang sering diajukan