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.

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.