Editor Flexbox
Alat editor susun atur Flexbox dalam talian percuma, pratonton visual masa nyata
Tentang Penyunting Flexbox
Susun kontena flex secara visual dan salin CSS yang sepadan. Togol arah (row, column, row-reverse, column-reverse), justify-content (enam pilihan termasuk space-evenly), align-items (termasuk stretch dan baseline), flex-wrap, gap, dan bilangan item pratonton — pratonton langsung dan panel kod dikemas kini serta-merta.
Cara Menggunakannya
1. Klik butang dalam kad Properties untuk memilih flex-direction, justify-content, align-items, dan flex-wrap. 2. Seret slider Gap (0–32px) untuk menetapkan jarak antara item. 3. Seret slider Items (1–12) untuk menambah atau mengeluarkan kotak pratonton. 4. Perhatikan pratonton langsung di bahagian atas, kemudian klik Copy untuk menyalin blok deklarasi flex penuh.
Sifat & Pilihan
direction: row | column | row-reverse | column-reverse. justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly. align-items: flex-start | flex-end | center | stretch | baseline. flex-wrap: nowrap | wrap | wrap-reverse. gap dalam px. Keluaran sentiasa mengeluarkan display: flex serta kelima-lima sifat tanpa mengira sama ada nilai adalah lalai.
▶Mengapa keluaran termasuk setiap sifat walaupun lalai?
▶Bolehkah saya menetapkan flex-grow, flex-shrink, atau flex-basis setiap item?
▶Adakah align-items: baseline benar-benar menjajarkan mengikut garis asas teks?
▶Adakah terdapat bilangan item maksimum?
Jika alat ini membantu anda, pertimbangkan untuk membelikan saya kopi.
Belikan saya kopi