LocalToolsKumpulan alat browser offline

Kategori: Alat pengembang

Generator Flexbox CSS

Ide kami sendiriAlatnya tidak ada?

Bangun kontainer flex secara visual dan salin CSS-nya

Atur flex-direction, flex-wrap, justify-content, align-items, dan gap pada pratinjau langsung yang dibangun dari item flex nyata, lalu salin deklarasi kontainer yang sudah jadi. Tidak ada apa pun di sini yang meninggalkan browser Anda.

Keluaran
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

Semua yang ada di halaman ini diproses di peramban Anda. Tidak ada yang diunggah.

Apa fungsi alat ini

Flexbox memiliki lima properti yang saling berkaitan — arah membalik makna "sumbu utama" itu sendiri untuk wrap dan justify-content — sehingga lebih cepat melihat perubahannya daripada membayangkannya. Alat ini menampilkan kontainer flex nyata di layar dengan item bernomor di dalamnya, sehingga setiap opsi dinilai dari bagaimana kotak-kotak itu benar-benar bergerak, bukan dari model mental terhadap spesifikasinya.

Cara memakainya

  1. Atur flex-direction dan flex-wrap.
  2. Pilih justify-content dan align-items, lalu sesuaikan celah dan jumlah item.
  3. Salin aturan .container yang sudah jadi ke dalam stylesheet Anda.

Privasi

Alat ini berjalan sepenuhnya di peramban Anda. Masukan Anda tidak pernah diunggah, disimpan, atau dibagikan — menutup tab akan menghapusnya.

Pertanyaan yang sering diajukan

Apakah pratinjaunya tata letak flex sungguhan?
Ya. Kotak bernomor itu ditata dengan CSS persis yang sedang Anda atur, bukan gambar dari salah satunya, sehingga yang Anda lihat adalah yang dihasilkan aturan yang disalin.
Mengapa mengubah flex-direction mengubah fungsi justify-content?
justify-content selalu bekerja sepanjang sumbu utama, dan flex-direction-lah yang menentukan apakah sumbu utama itu horizontal atau vertikal. Beralih ke column mengubah "justify" dari kiri/kanan menjadi atas/bawah.
Apakah ada sesuatu tentang tata letak saya yang diunggah?
Tidak. CSS-nya adalah teks yang disusun di halaman dari kontrol yang Anda atur, dan pratinjaunya dirender secara lokal.

Kembali ke semua alat