Flexbox Generator

Mag-set up ng flex container at ng mga item nito gamit ang mga visual na kontrol, panoorin ang reaksyon ng layout nang live, at kopyahin ang CSS sa isang click lang.

Mga Preset
Container
Direksyon
Wrap
I-justify ang content
I-align ang mga item
Mga Item
Item 1
I-align ang sarili
CSS
I-adjust ang container at mga item para hubugin ang iyong layout.

Ang iyong layout ay binuo mismo sa iyong browser. Walang anuman sa mga inilalagay mo rito ang ina-upload sa BroBroGo.

FAQ

Ano ang pagkakaiba ng justify-content at align-items?

Ang justify-content ay naglalagay ng espasyo sa mga item sa kahabaan ng main axis — ang direksyon ng daloy ng row o column — habang ang align-items naman ay nagpoposisyon sa mga ito sa kabilang axis. Palitan ang direksyon mula row patungong column at magpapalit ang dalawang axis, kaya ang justify-content ay magsisimulang gumana mula itaas pababa at ang align-items naman ay mula kaliwa pakanan.

Paano gumagana ang mga kontrol para sa bawat item?

Pumili ng item sa pamamagitan ng numero nito, pagkatapos ay i-set kung gaano ito lalaki para punan ang bakanteng espasyo, kung gaano ito liliit kapag masikip ang espasyo, ang panimulang sukat nito (basis) at ang sarili nitong cross-axis alignment. Inuusog ng order ang item nang mas maaga o mas huli sa screen nang hindi binabago ang HTML. Ang mga item lamang na talagang binago mo ang magkakaroon ng sarili nilang panuntunan sa CSS.

Kailan nagiging mahalaga ang wrap at align-content?

Kapag naka-off ang wrapping, ang bawat item ay pinipilit sa iisang linya at maaaring mapiga nang mas makitid. I-on ito at ang mga item na hindi na kasya ay bababa sa susunod na linya — doon na magsisimulang gumana ang align-content, na naglalagay ng espasyo sa mga linya bilang isang grupo. Ang gap ay nagtatakda ng espasyo sa pagitan ng mga item, at sa pagitan ng mga linya, nang walang margin.

CSS Cubic Bezier GeneratorI-drag ang dalawang handle para hubugin ang easing curve, panoorin ang paggalaw ng dot kumpara sa steady na dot, at kopyahin ang cubic-bezier() value.Border Radius GeneratorBilugin ang bawat sulok gamit ang mga slider, humubog ng mga organic blob gamit ang elliptical mode, at kopyahin ang CSS agad-agad.Box Shadow GeneratorI-drag ang mga slider para humubog ng box-shadow, magpatong ng mga layer para sa lalim, at kopyahin ang natapos na CSS agad-agad.Gradient GeneratorBumuo ng linear, radial, o conic na gradient, magdagdag ng mga color stop at i-set ang direksyon, pagkatapos ay kopyahin ang CSS sa isang click lang.CSS Grid GeneratorI-set ang iyong mga column at row, i-drag sa mga cell para maglagay ng mga item, at kopyahin ang grid CSS kasama ang katugmang HTML sa isang click lang.CSS clamp() CalculatorMaglagay ng sukat para sa maliliit at malalaking screen at kumuha ng fluid na clamp() value na maayos na nag-i-scale sa pagitan — para sa mga sukat ng font, padding, margin o gap.Color ConverterMag-convert ng mga kulay sa pagitan ng HEX, RGB, HSL, HSV, CMYK, at LAB — i-edit ang kahit anong field at ang iba ay mag-a-update habang nagpapatuloy ka.