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.

Isinulat at sinuri ng editorial team ng BroBroGo.Huling na-update:

Ang CSS Flexbox ay isang sistema ng layout na nagbibigay-daan sa maayos na pag-aayos ng mga elemento sa loob ng isang container. Sa pamamagitan ng CSS Flexbox Generator, maaaring visual na i-set up ang isang flex container at ang mga item nito gamit ang mga kontrol, habang pinapanood ang reaksyon ng layout sa isang live preview bago kopyahin ang nabuong CSS code.

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

Pag-unawa sa mga Kontrol ng Container

Ang flex container ang nagtatakda ng konteksto para sa lahat ng mga direktang anak na elemento nito. Sa pamamagitan ng pag-adjust sa mga sumusunod na katangian, mababago ang kabuuang daloy at distribusyon ng espasyo:

  • Direksyon: Nagpapasya kung paano ilalatag ang mga item. Ang mga pagpipilian ay:
    • Row (pahalang mula kaliwa pakanan)
    • Row reverse (pahalang mula kanan pakaliwa)
    • Column (patayo mula itaas pababa)
    • Column reverse (patayo mula ibaba pataas)
  • Wrap: Nagtatakda kung ang mga item ay pupwersahing manatili sa iisang linya o papayagang bumaba sa susunod na linya. Ang mga opsyon ay Walang wrap, Wrap, at Wrap reverse.
  • I-justify ang content: Kinokontrol ang pagpoposisyon ng mga item sa kahabaan ng main axis. Maaaring piliin ang Simula, Dulo, Gitna, Space between, Space around, o Space evenly.
  • I-align ang mga item: Nagtatakda ng alignment ng mga item sa cross axis. Ang mga pagpipilian ay Simula, Dulo, Gitna, Stretch, at Baseline.
  • I-align ang content: Gumagana lamang kapag may maraming linya ang layout. Inaayos nito ang espasyo ng mga linya gamit ang Simula, Dulo, Gitna, Stretch, Space between, Space around, o Space evenly.
  • Gap: Isang numerong halaga na nagtatakda ng espasyo sa pagitan ng mga item at sa pagitan ng mga linya nang hindi gumagamit ng margin.

Pamamahala sa mga Katangian ng bawat Item

Maaari ding i-customize ang gawi ng bawat indibidwal na item sa loob ng flexbox. Kapag pinindot ang "Magdagdag ng item", may lalabas na bagong elemento (halimbawa, "Item 5"). Ang mga sumusunod na katangian ay maaaring i-adjust para sa bawat item:

  • Order: Isang numerong halaga na nagbabago sa pagkakasunod-sunod ng pagpapakita ng item sa screen nang hindi binabago ang istruktura ng HTML.
  • Grow: Isang numerong halaga na nagtatakda kung gaano kalaking espasyo ang maaaring kainin ng item kapag may natitirang bakante sa container.
  • Shrink: Isang numerong halaga na nagpapasya kung gaano liliit ang item kapag masikip na ang espasyo sa container.
  • Basis: Ang panimulang sukat ng item bago i-distribute ang natitirang espasyo. Maaari itong lagyan ng numerong halaga o i-set sa "Auto".
  • I-align ang sarili: Pinapayagan ang isang partikular na item na i-override ang pangkalahatang alignment ng container. Ang mga opsyon ay Auto, Simula, Dulo, Gitna, Stretch, at Baseline.

Ang generator ay may matalinong sistema ng pagbuo ng code: ang mga item lamang na talagang binago mo ang magkakaroon ng sarili nilang panuntunan sa CSS.

Ang Relasyon ng Main Axis at Cross Axis

Ang direksyon ng layout ang nagtatakda kung alin ang magiging main axis at cross axis. Kapag ang direksyon ay naka-set sa Row o Row reverse, ang main axis ay tumatakbo nang pahalang at ang cross axis naman ay patayo.

Kapag binago ang direksyon patungong Column o Column reverse, magpapalit ang dalawang axis. Dahil dito, ang I-justify ang content ay magsisimulang gumana mula itaas pababa (patayo), at ang I-align ang mga item naman ay gagana mula kaliwa pakanan (pahalang). Ang pag-unawa sa palitang ito ay mahalaga upang makuha ang tamang posisyon ng mga elemento.

Ang Papel ng Wrap at Align Content sa Multi-line Layouts

Kapag ang wrap ay naka-set sa Walang wrap, ang lahat ng mga item ay pinipilit na magkasya sa iisang linya. Maaari silang mapiga nang mas makitid depende sa kanilang shrink property.

Kapag binago ito sa Wrap, ang mga item na hindi na kasya sa lapad o taas ng container ay awtomatikong bababa sa susunod na linya. Sa puntong ito, ang I-align ang content ay magsisimula nang gumana. Kinokontrol nito ang distribusyon ng espasyo sa pagitan ng mga nabuong linya bilang isang grupo. Ang Gap naman ay nagpapanatili ng parehong distansya sa pagitan ng mga item sa bawat linya at sa pagitan mismo ng mga linya.

Mga Karaniwang Layout Pattern gamit ang mga Preset

Ang tool ay naglalaman ng mga preset upang mabilis na maipakita ang mga karaniwang disenyo sa web:

  • Gitna: Isang layout kung saan ang isang elemento ay perpektong nakaposisyon sa gitna ng container gamit ang parehong vertical at horizontal alignment.
  • Navbar: Isang pahalang na bar na karaniwang ginagamit sa itaas ng website, kung saan ang mga link ay nakalatag nang may maayos na espasyo.
  • Stack: Isang patayong pagkakaayos ng mga elemento na sunod-sunod mula itaas pababa.
  • Mga Card: Isang grid-like na layout ng mga kahon na awtomatikong bumababa sa susunod na linya kapag kulang ang espasyo.
  • Sidebar: Isang layout na naghahati sa screen para sa isang pangunahing nilalaman at isang mas makitid na hanay sa gilid.

Mga Madalas Itanong (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.

Paano ko makukuha ang nabuong CSS code?

Matapos i-adjust ang container at mga item para hubugin ang iyong layout, makikita ang awtomatikong nabuong code sa ilalim ng seksyong CSS. Ang pag-click sa "Kopyahin ang CSS" ay magpapalit sa estado ng button patungong "Copied", na nagpapatunay na ang code ay matagumpay nang nakopya sa iyong clipboard at handa nang i-paste sa iyong stylesheet.

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.