Flexboxi ja Gridi mänguväljak

Kuidas flexboxi ja gridi mänguväljakut kasutada

1. Vali Paigutus: Flexbox või Grid, või alusta ühest Eelseadest (Keskele, Navigeerimisriba, Murduvad kaardid, Külgriba, Kohanduv kaardivõrgustik, Püha graal, 12 veergu).
2. Sea Konteineri omadused. Flexboxi jaoks: flex-direction ja flex-wrap. Gridi jaoks: grid-template-columns, grid-template-rows, grid-auto-flow, justify-items ja grid-template-areas. Mõlemal on ühised justify-content, align-items, align-content, row-gap (px) ja column-gap (px).
3. Halda Elemente nuppudega Lisa element, Eemalda valitud element ja Lähtesta valitud element. Klõpsa eelvaates elemendil (või liigu sellele Tab-klahviga ja vajuta Enter), et see valida.
4. Muuda valitud elementi: order ja align-self mõlemas režiimis, flex-grow, flex-shrink ja flex-basis flexboxi jaoks ning grid-area, grid-column, grid-row ja justify-self gridi jaoks.
5. Kopeeri CSS-kood ja sellele vastav HTML-kood nende Kopeeri nuppudega.

Iga juhtelement on tavaline vormiväli, seega töötab kogu mänguväljak ka ainult klaviatuuriga. CSS sisaldab ainult omadusi, mida oled vaikeväärtustest muutnud, mis hoiab selle lühikese, ning sama seadistusega elemendid jagavad ühte reeglit (.item, kui kõik on ühesugused).

Tööriist töötab sinu brauseris. Midagi, mida sisestad, ei saadeta serverisse.

Flexbox lühidalt

Flexbox paigutab elemendid piki ühte telge. flex-direction määrab põhitelje (rida või veerg); justify-content jaotab elemendid selle peale (center, space-between…) ja align-items paigutab need ristteljel. Valikuga flex-wrap: wrap liiguvad elemendid, mis ei mahu, uuele reale, ja align-content jaotab neid ridu.

Igal elemendil on kolm suurusomadust, mida tavaliselt kirjutatakse kokku kui flex:

• flex-basis: algsuurus (auto kasutab sisu või width väärtust);
• flex-grow: kui suure osa vabast ruumist element võtab (0 = mitte midagi, 1 = võrdne osa);
• flex-shrink: kui palju element järele annab, kui ruumi napib (0 = ei kahane kunagi).

Eelseade Külgriba näitab klassikalist mustrit: külgriba omadustega flex-basis: 200px ja flex-shrink: 0 ning põhiala omadusega flex-grow: 1.

CSS Grid lühidalt

Grid paigutab elemendid kahes mõõtmes. grid-template-columns: repeat(3, 1fr) loob kolm võrdset veergu; fr on osa vabast ruumist. repeat(auto-fill, minmax(120px, 1fr)) loob nii palju vähemalt 120 px veerge, kui mahub, mis annab kohanduva kaardivõrgustiku ilma ühegi meediapäringuta.

Elemendid täidavad lahtreid järjekorras, kui sa neid ei paiguta: grid-column: span 2 teeb elemendi kahe veeru laiuseks ja grid-column: 1 / -1 venitab selle üle terve rea.

grid-template-areas laseb paigutuse nimedega ära joonistada. Sisesta üks rida igale reale, näiteks header header ja seejärel nav main, ning anna elementidele grid-area: header või grid-area: main. Punkt tähistab tühja lahtrit. Igal real peab olema sama arv lahtreid ja iga nimi peab moodustama ristküliku; muul juhul tööriist hoiatab.