Flexbox Builder
Itakda ang direksiyon, wrap, alignment at gap; i-edit ang flex sizing at order ng bawat item. Magsimula sa row, centered, wrapping card o vertical stack.
justify-content para sa main axis; align-items para sa cross axis. align-content para sa maraming wrapped line. Maaaring walang pagbabago sa stretch kapag fixed ang taas.
Mga item
Live na preview
I-scroll kung mas malapad ang fixed container sa screen. Dekorasyon lang ang background, border at label; layout CSS lang ang export.
Paano gamitin
Paano gamitin
- Pumili ng preset at itakda ang container at pixel size.
- Magdagdag ng hanggang 12 item at i-edit ang grow, shrink, basis, order, align-self, lapad at taas.
- Suriin ang preview, kopyahin o i-download ang CSS, at gamitin ang tamang parent at child class.
Container at item
May apat na direction, tatlong wrap mode, main-axis distribution, align-items, align-content at gap. Bawat grow/shrink 0–20, basis auto o px/%, integer order −100–100, align-self, lapad 0–600px at taas 0–400px. Container: lapad 100–1200px, taas 80–600px, gap 0–100px.
Unawain ang axes
Main axis ang justify-content; cross axis ang align-items. Para sa maraming linya ang align-content. Maaaring pigilan ng fixed size ang stretch. Maaaring iba ang aktuwal na main-axis size dahil sa grow/shrink/basis. Visual order lang ang nagbabago; hindi DOM o reading order.
Lokal na CSS output
Pareho ang layout value sa preview at export, kasama ang zero minimum size at border-box. Dekorasyon lang ang kulay, border at label. Container/item class lang ang export, walang HTML, SCSS, Tailwind o media query. Walang upload o storage. Maaaring baguhin ng tunay na content at ibang style ang layout.
Mga madalas itanong
Maaari mo ring alamin
Bakit walang pagbabago sa align-content?
Para ito sa maraming flex line. Paganahin ang wrap at gumamit ng sapat na item.
Binabago ba ng order ang reading order?
Hindi. Visual layout lang. Panatilihing makabuluhan ang HTML order.