Generator Flexbox

Atur wadhah flex lan item-itemipun kanthi kontrol visual, pirsani owah-owahanipun kanthi langsung, lan salin CSS kanthi saklik.

Setelan
Wadhah (Container)
Arah
Wrap
Justify content
Align items
Item
Item 1
Align self
CSS
Suaikaken wadhah lan item kangge ngatur tata letak panjenengan.

Tata letak panjenengan dipunproses langsung wonten ing browser. Boten wonten data ingkang dipununggah dhateng BroBroGo.

FAQ

Menapa bedanipun justify-content lan align-items?

Justify-content ngatur jarak item ing sadawane sumbu utama (main axis) — arah iline baris utawa kolom — dene align-items ngatur posisi ing sumbu liyane (cross axis). Yen arah diganti saka baris dadi kolom, sumbu loro kuwi bakal diijolake.

Kadospundi caranipun ngatur kontrol saben item?

Pilih item adhedhasar nomeripun, banjur atur sepinten saged mindhak ageng (grow) kangge ngebaki papan, sepinten saged nyilikake (shrink) nalika papanipun sempit, ukuran awalipun (basis), lan alignment piyambak ing cross-axis. Order saged mindhah posisi tampilan item tanpa ngowahi HTML.

Kapan wrap lan align-content punika migunani?

Nalika wrapping dipunpajahi, saben item badhe dipunpeksa wonten ing satunggal baris lan saged dados langkung sempit. Yen dipunuripaken, item ingkang boten cekap badhe dawah dhateng baris salajengipun — ing mriki align-content wiwit makarya kangge ngatur jarak baris. Gap ngatur jarak antawisipun item lan baris.

Ditulis lan ditinjau dening tim editorial BroBroGo.Pungkasan dipunanyari:

Pambuka CSS Flexbox lan Pigunanipun

CSS Flexbox utawa Flexible Box Layout minangka sistem tata letak siji dimensi ingkang dipunginakaken kangge ngatur tata letak, perataan, lan distribusi papan ing antawisipun item-item wonten ing salebeting wadhah (container). Sistem punika nggampilaken pangaturan elemen sanadyan ukuranipun dinamis utawa boten dipunmangertosi sadurungipun. Generator Flexbox punika nggadhahi fungsi utama kangge mbantu pangguna ngrancang wadhah flex lan item-itemipun kanthi visual. Pangguna saged ngatur maneka warna kontrol, mirsani owah-owahanipun kanthi langsung lumantar pratinjau visual, lan nyalin kode CSS ingkang dipunasilaken kangge kabetahan desain.

Ngertos Properti Wadhah Flex (Flex Container)

Wadhah flex minangka elemen induk ingkang mbungkus item-item ing ngeripun. Kangge ngatur tata letak wadhah, piranti punika nyediyakaken sawetara kontrol utama:

  • Arah: Pilihanipun inggih punika Baris, Baris kuwalik, Kolom, lan Kolom kuwalik. Properti punika nemtokaken sumbu utama (main axis) panggonan item dipuntata. Nalika ngowahi arah saking baris dadi kolom, sumbu utama lan sumbu silang (cross axis) badhe diijolake, saengga mangaruhi cara kerjanipun justify-content lan align-items.
  • Wrap: Pilihanipun inggih punika No wrap, Wrap, lan Wrap reverse. Nalika milih No wrap, sedaya item badhe dipunpeksa wonten ing satunggal baris sanadyan ukurane ngluwihi wadhah. Yen milih Wrap, item ingkang boten cekap badhe dawah dhateng baris salajengipun.
  • Justify content: Pilihanipun inggih punika Start, End, Center, Space between, Space around, lan Space evenly. Properti punika ngatur perataan item ing sadawane sumbu utama.
  • Align items: Pilihanipun inggih punika Start, End, Center, Stretch, lan Baseline. Properti punika ngatur perataan item ing sumbu silang.
  • Align content: Pilihanipun inggih punika Start, End, Center, Stretch, Space between, Space around, lan Space evenly. Properti punika ngatur jarak antarane baris-baris item nalika wrapping dipunuripaken.
  • Gap: Nilai numerik ingkang nemtokaken letak utawa jarak antawisipun item lan antawisipun baris.

Ngertos Properti Item Flex (Flex Item)

Saben item ing salebeting wadhah flex saged dipunatur kanthi individu. Nalika tombol "Tambah item" dipunklik, item enggal badhe muncul, tuladhanipun "Item 5". Properti individu ingkang saged dipunatur inggih punika:

  • Order: Nilai numerik kangge nemtokaken urutan tampilan item tanpa ngowahi struktur HTML asli.
  • Grow: Nilai numerik ingkang nemtokaken sepinten item saged mindhak ageng kangge ngebaki papan sisa wonten ing wadhah.
  • Shrink: Nilai numerik ingkang nemtokaken sepinten item saged nyilikake nalika ukuran wadhah langkung sempit tinimbang ukuran item.
  • Basis: Nilai numerik utawa "Auto" ingkang nemtokaken ukuran awal item sadurunge papan sisa dipunbagi.
  • Align self: Pilihanipun inggih punika Auto, Start, End, Center, Stretch, lan Baseline. Properti punika ngidini item tartamtu nggadhahi perataan ingkang beda saking aturan align-items ingkang dipuntetepaken dening wadhah.

Wigati dipunmangertosi bilih namung item ingkang nggadhahi owah-owahan properti ingkang badhe dipundamelaken aturan CSS piyambak wonten ing output kode.

Hubungan Sumbu Utama, Sumbu Silang, lan Wrapping

Pangertosan babagan sumbu utama (main axis) lan sumbu silang (cross axis) wigati sanget nalika ngginakaken Flexbox. Justify content makarya ing sadawane sumbu utama, dene align-items makarya ing sumbu silang. Yen arah dipun-setel dadi Baris, sumbu utama lumaku kanthi horisontal lan sumbu silang vertikal. Kosok balenipun, yen dipun-setel dadi Kolom, sumbu utama dados vertikal lan sumbu silang dados horisontal.

Nalika wrapping dipunpajahi (No wrap), sedaya item dipunpeksa tetep ing satunggal baris. Nanging, nalika wrapping dipunuripaken (Wrap utawa Wrap reverse), item-item ingkang boten cekap badhe dawah dhateng baris salajengipun. Ing kahanan multi-baris punika, properti align-content nggadhahi peran kangge ngatur jarak lan perataan baris-baris kasebat minangka satunggal kesatuan. Properti gap ugi mbantu kanthi otomatis nyediyakaken jarak ingkang konsisten ing antawisipun item lan baris kasebat.

Pola Tata Letak Flexbox Umum

Generator Flexbox saged dipunginakaken kangge ngrancang maneka warna pola tata letak umum ingkang asring dipunpanggihaken ing desain web, kados ta:

  • Elemen ingkang wonten ing tengah (Centering): Ngginakaken justify-content: center lan align-items: center kangge mapanaken elemen leres wonten ing tengah-tengah wadhah.
  • Navbar (Navigation Bar): Ngatur item menu kanthi horisontal ngginakaken justify-content: space-between utawa space-around.
  • Tumpukan: Mapanaken elemen kanthi vertikal ngginakaken arah Kolom.
  • Kertu: Nampilaken kothak-kothak informasi kanthi wrapping supados saged nyesuaikan kaliyan lebar layar.
  • Sidebar: Ngatur tata letak kolom utama lan kolom samping kanthi proporsi flex-grow ingkang beda.

Sifat Flexbox ingkang fleksibel punika nggampilaken pandamelan tata letak ingkang responsif, ing ngendi ukuran lan posisi item saged adaptasi kanthi otomatis manut kaliyan ukuran layar piranti pangguna.

Pangolahan Data lan Privasi

Nalika ngginakaken Generator Flexbox, keamanan data pangguna dipunjamin kanthi cara pangolahan lokal. Tata letak panjenengan dipunproses langsung wonten ing browser. Boten wonten data ingkang dipununggah dhateng BroBroGo. Proses punika lumaku kanthi langsung ing piranti pangguna tanpa mbetahaken komunikasi kaliyan server njawi kangge ngasilaken kode CSS. Nalika pangguna ngeklik "Salin CSS", status tombol badhe gantos dados "Copied" minangka tandha bilih kode sampun kasalin dhateng clipboard.

Pitakonan ingkang Asring Dipunajengaken (FAQ)

Menapa bedanipun justify-content lan align-items? Justify-content ngatur jarak item ing sadawane sumbu utama (main axis) — arah iline baris utawa kolom — dene align-items ngatur posisi ing sumbu liyane (cross axis). Yen arah diganti saka baris dadi kolom, sumbu loro kuwi bakal diijolake.

Kadospundi caranipun ngatur kontrol saben item? Pilih item adhedhasar nomeripun, banjur atur sepinten saged mindhak ageng (grow) kangge ngebaki papan, sepinten saged nyilikake (shrink) nalika papanipun sempit, ukuran awalipun (basis), lan alignment piyambak ing cross-axis. Order saged mindhah posisi tampilan item tanpa ngowahi HTML.

Kapan wrap lan align-content punika migunani? Nalika wrapping dipunpajahi, saben item badhe dipunpeksa wonten ing satunggal baris lan saged dados langkung sempit. Yen dipunuripaken, item ingkang boten cekap badhe dawah dhateng baris salajengipun — ing mriki align-content wiwit makarya kangge ngatur jarak baris. Gap ngatur jarak antawisipun item lan baris.

Sinten kemawon ingkang mbetahaken piranti punika? Piranti punika dipunbetahaken dening sinten kemawon ingkang badhe ngrancang tata letak CSS flexbox kanthi visual, mbetahaken kode CSS kanthi cepet kangge wadhah lan item, utawa badhe nyinaoni efek saking maneka warna properti flexbox dhateng tata letak.

Generator CSS Cubic BezierSeret kalih gagang kangge ngatur kurva easing, pirsani gerakan titik dibandhingake karo kacepetan konstan, lan salin nilai cubic-bezier().Generator Border RadiusNgbunderaken saben pojokan kanthi slider, damel wujud blob organik mawi mode elips, lan salin CSS kanthi cepet.Generator Box ShadowSeret slider kangge ngatur box-shadow, tumpuk lapisan kangge efek jero, lan salin CSS kanthi cepet.Generator GradienDamel gradien linear, radial, utawi conic, tambahaken color stops lan atur arahnipun, banjur salin CSS kanthi saklik.Generator CSS GridAtur kolom lan baris panjenengan, seret nglangkungi sel kangge masang item, lan salin CSS grid sarta HTML kanthi saklik.Kalkulator CSS clamp()Lebaken ukuran kangge layar alit lan ageng, banjur pikantuk nilai clamp() fluid ingkang saged gantos kanthi alus — kangge ukuran font, padding, margin, utawi gap.Konverter WarniKonversi warni antawisipun HEX, RGB, HSL, HSV, CMYK, lan LAB — sunting salah satunggal kolom lan kolom sanesipun badhe langsung nganyari.