Flexbox at Grid Playground

Paano gamitin ang flexbox at grid playground

1. Pumili ng Layout: Flexbox o Grid, o magsimula sa isa sa Mga preset (Nasa gitna, Navigation bar, Mga card na bumabalot, Sidebar, Responsive na card grid, Holy grail, 12 column).
2. Itakda ang mga property ng Container. Sa flexbox: flex-direction at flex-wrap. Sa grid: grid-template-columns, grid-template-rows, grid-auto-flow, justify-items at grid-template-areas. Parehong may justify-content, align-items, align-content, row-gap (px) at column-gap (px).
3. Pamahalaan ang Mga item gamit ang Magdagdag ng item, Alisin ang napiling item at I-reset ang napiling item. I-click ang isang item sa preview (o i-tab ito at pindutin ang Enter) para piliin ito.
4. I-edit ang napiling item: order at align-self sa parehong mode, flex-grow, flex-shrink at flex-basis para sa flexbox, at grid-area, grid-column, grid-row at justify-self para sa grid.
5. Kopyahin ang CSS code at ang katugmang HTML code gamit ang kani-kanilang button na Kopyahin.

Karaniwang form field ang bawat control, kaya gumagana ang buong playground gamit lang ang keyboard. Ang mga property lang na binago mo mula sa default ang laman ng CSS, kaya maikli ito, at ang mga item na pareho ang setting ay nagbabahagi ng iisang rule (.item kapag magkakapareho silang lahat).

Gumagana ito sa iyong browser. Walang ini-type mo na ipinapadala sa server.

Flexbox sa madaling salita

Inaayos ng flexbox ang mga item sa isang axis. Itinatakda ng flex-direction ang main axis (hilera o column); ipinamamahagi ng justify-content ang mga item sa axis na iyon (center, space-between…), at inilalagay ng align-items ang mga ito sa cross axis. Sa flex-wrap: wrap, lumilipat sa bagong linya ang mga item na hindi kasya, at ang align-content ang naglalaan ng espasyo sa pagitan ng mga linyang iyon.

May tatlong sizing property ang bawat item, na karaniwang isinusulat nang sabay bilang flex:

• flex-basis: ang panimulang laki (ginagamit ng auto ang nilalaman o width);
• flex-grow: gaano karami sa natitirang espasyo ang kukunin ng item (0 = wala, 1 = pantay na bahagi);
• flex-shrink: gaano karami ang isusuko nito kapag kulang ang espasyo (0 = hindi kailanman liliit).

Ipinapakita ng preset na Sidebar ang klasikong pattern: sidebar na may flex-basis: 200px at flex-shrink: 0, at pangunahing area na may flex-grow: 1.

CSS Grid sa madaling salita

Inaayos ng grid ang mga item sa dalawang dimensyon. Ang grid-template-columns: repeat(3, 1fr) ay gumagawa ng tatlong pantay na column; ang fr ay bahagi ng natitirang espasyo. Ang repeat(auto-fill, minmax(120px, 1fr)) ay gumagawa ng kasing-daming column na hindi bababa sa 120px na kasya, na lumilikha ng responsive na card grid nang walang media query.

Pinupunan ng mga item ang mga cell ayon sa ayos, maliban kung ilalagay mo sila: ang grid-column: span 2 ay ginagawang dalawang column ang lapad ng item, at ang grid-column: 1 / -1 ay iniuunat ito sa buong hilera.

Hinahayaan ka ng grid-template-areas na iguhit ang layout gamit ang mga pangalan. Mag-type ng isang hilera bawat linya, halimbawa header header saka nav main, at bigyan ang mga item ng grid-area: header o grid-area: main. Ang tuldok ay tanda ng walang lamang cell. Kailangang pareho ang bilang ng cell ng bawat hilera at dapat bumuo ng parihaba ang bawat pangalan; magbababala ang tool kung hindi.