Generator CSS Flexbox
Bangun aturan wadah flexbox CSS dari kontrol flex-direction, flex-wrap, justify-content, align-items, align-content, dan gap — salin blok .container {} yang sudah siap ke stylesheet Anda.
Input
Output
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-flexbox-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"flexDirection": "row",
"justifyContent": "space-between",
"alignItems": "center",
"flexWrap": "wrap",
"alignContent": "stretch",
"gap": "16"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-flexbox-generator` tool (CSS Flexbox Generator) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/css-flexbox-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Generator CSS Flexbox — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Apa itu Flexbox?
Flexbox (display: flex) adalah model tata letak CSS untuk mengatur item dalam satu baris atau kolom, mendistribusikan ruang di antara mereka, dan menyelaraskannya tanpa float atau positioning manual. Ini adalah pilihan default untuk navbar, toolbar, baris kartu, kontrol form, dan tata letak apa pun di mana item perlu sejalan dan berbagi ruang secara dapat diprediksi. Alat ini membangun sisi wadah dari flexbox — aturan yang Anda tempatkan pada elemen induk yang mengubah anak langsungnya menjadi item flex.
Properti yang dihasilkan alat ini
- flex-direction — sumbu tempat item mengalir:
row(kiri ke kanan),row-reverse,column(atas ke bawah), ataucolumn-reverse. - justify-content — bagaimana item diberi jarak di sepanjang sumbu utama:
flex-start,flex-end,center,space-between,space-around, atauspace-evenly. - align-items — bagaimana item selaras di sepanjang sumbu silang:
stretch(default, mengisi wadah),flex-start,flex-end,center, ataubaseline. - flex-wrap — apakah item tetap pada satu baris (
nowrap) atau membungkus ke beberapa baris (wrap,wrap-reverse) ketika kehabisan ruang. - align-content — bagaimana beberapa baris item yang dibungkus diberi jarak dalam wadah. Ini hanya memiliki efek visual setelah
flex-wrapadalahwrapatauwrap-reverse— pada satu baris tidak ada yang didistribusikan, jadi alat menghilangkannya dari CSS sepenuhnya ketikaflex-wrapadalahnowrap. - gap — jarak tetap antara item, dalam piksel, tanpa perlu margin pada anak individual.
Cara menggunakan alat ini
- Pilih flex-direction untuk mengatur sumbu utama tata letak Anda.
- Atur justify-content dan align-items untuk mengontrol jarak dan penyelarasan di sepanjang sumbu utama dan silang.
- Aktifkan flex-wrap jika Anda ingin item membungkus ke baris baru alih-alih meluap atau menyusut — ini mengungkapkan kontrol align-content untuk jarak antara baris yang dibungkus.
- Seret Gap untuk mengatur jarak konsisten antara item.
- Salin CSS yang dihasilkan dari kotak CSS, atau unduh sebagai file
.css, dan terapkan kelas (atau sesuaikan pemilih) ke elemen induk wadah flex Anda dalam stylesheet Anda.
Output diperbarui secara instan saat Anda menyesuaikan kontrol apa pun — tidak ada langkah "generate" terpisah.
FAQ
Mengapa align-content tidak muncul di CSS saya?
Ini hanya muncul ketika flex-wrap diatur ke wrap atau wrap-reverse. Dengan nowrap hanya ada satu baris item, jadi align-content tidak memiliki efek sesuai spesifikasi CSS — memasukkannya hanya akan menjadi kode mati, jadi alat ini menghilangkannya secara otomatis.
Apa perbedaan antara align-items dan align-content?
align-items menyelaraskan item dalam baris mereka di sumbu silang. align-content menyelaraskan baris itu sendiri ketika ada lebih dari satu (yaitu, ketika item membungkus) dan ada ruang ekstra di wadah.
Apakah ini mencakup properti per-item seperti flex-grow atau order?
Belum — alat ini berfokus pada aturan tingkat wadah yang berlaku untuk setiap anak sekaligus. Penggantian per-item (flex-grow, flex-shrink, flex-basis, align-self, order) diatur secara individual dengan aturan terpisah per anak (misalnya .item:nth-child(2) { flex-grow: 1; }) langsung dalam stylesheet Anda.
Apakah saya perlu mengganti nama pemilih .container?
Ya — .container hanya merupakan placeholder agar CSS siap untuk ditempel. Ganti dengan kelas atau pemilih elemen induk flex Anda yang sebenarnya (misalnya .navbar, #header, .card-list).
Apakah ini akan berfungsi di setiap browser?
Ya. Flexbox telah didukung tanpa awalan di semua browser utama selama bertahun-tahun, dan gap pada wadah flex didukung di setiap browser modern juga.
Privasi
Semuanya terjadi di browser Anda. Tidak ada CSS, nilai, atau pengaturan yang Anda masukkan pernah dikirim ke server — deklarasi dihasilkan dan diperbarui secara lokal saat Anda mengetik.