Langkau ke kandungan utama
LibraTool logoLibraTool

Penjana Flexbox CSS percuma

Eksperimen dengan arah flex, bungkus, justifikasi dan selaras pada item langsung — dan salin CSS.

Berfungsi luar talian selepas dimuatkan
Pratetapan

Petua: klik item dalam pratonton untuk togol flex-grow: 1 padanya.

Pratonton 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>

🔒 Segala-galanya berjalan dalam pelayar anda — tiada yang dimuat naik.

Cara ia berfungsi

Taman permainan flexbox interaktif: tukar flex-direction, wrap, justify-content dan align-items dan tonton sehingga 10 item langsung tersusun semula serta-merta. Klik mana-mana item untuk beri flex-grow: 1 dan lihat bagaimana ia menuntut ruang. CSS dikemas kini secara langsung, sedia untuk disalin ke dalam projek anda.

  1. 1
    Tetapkan bekas
    Arah, wrap, justify-content, align-items, jurang.
  2. 2
    Tambah item
    Satu hingga sepuluh item flex bernombor.
  3. 3
    Uji coba
    Klik item untuk togol flex-grow dan lihat kesannya.
  4. 4
    Salin CSS
    Peraturan bekas (dan item), sedia untuk ditampal.

Segalanya berjalan dalam pelayar anda — tiada apa dimuat naik.

Alat berkaitan

🟦

Penjana Petak CSS

Reka bentuk petak CSS secara visual — trek, unit dan jurang — dan salin CSS dan HTML yang dijana.

Cuba
🌈

Penjana Kecerunan CSS

Cipta kecerunan CSS linear, jejari, dan konik dengan pratonton langsung. Salin CSS dalam satu klik.

Cuba
🎨

Penjana Bayang Kotak CSS

Pembina visual untuk box-shadow CSS dengan pratonton langsung, penindanan berbilang lapisan, pemilih warna, togol inset, dan salin satu klik. Termasuk pratetap Material, neumorfisme, dan cahaya.

Cuba

Soalan lazim