Flexbox- ja Grid-testialusta

Näin käytät flexbox- ja grid-testialustaa

1. Valitse Asettelu: Flexbox tai Grid, tai aloita jostain Esiasetukset-kohdan vaihtoehdosta (Keskitetty, Navigointipalkki, Rivittyvät kortit, Sivupalkki, Responsiivinen korttiruudukko, Pyhä graal, 12 saraketta).
2. Aseta Säiliö-ominaisuudet. Flexboxille: flex-direction ja flex-wrap. Gridille: grid-template-columns, grid-template-rows, grid-auto-flow, justify-items ja grid-template-areas. Molemmille yhteisiä ovat justify-content, align-items, align-content, row-gap (px) ja column-gap (px).
3. Hallitse Kohteet-osiota painikkeilla Lisää kohde, Poista valittu kohde ja Nollaa valittu kohde. Napsauta kohdetta esikatselussa (tai siirry siihen Tab-näppäimellä ja paina Enter) valitaksesi sen.
4. Muokkaa valittua kohdetta: order ja align-self molemmissa tiloissa, flex-grow, flex-shrink ja flex-basis flexboxille sekä grid-area, grid-column, grid-row ja justify-self gridille.
5. Kopioi CSS-koodi ja vastaava HTML-koodi niiden Kopioi-painikkeilla.

Jokainen säädin on tavallinen lomakekenttä, joten koko testialusta toimii pelkällä näppäimistöllä. CSS sisältää vain ominaisuudet, joita olet muuttanut oletuksista, mikä pitää sen lyhyenä, ja kohteet, joilla on samat asetukset, jakavat yhden säännön (.item, kun kaikki vastaavat toisiaan).

Työkalu toimii selaimessasi. Mitään kirjoittamaasi ei lähetetä palvelimelle.

Flexbox pähkinänkuoressa

Flexbox asettelee kohteet yhtä akselia pitkin. flex-direction määrittää pääakselin (rivi tai sarake). justify-content jakaa kohteet sen suuntaisesti (center, space-between…) ja align-items sijoittaa ne poikkiakselille. Kun flex-wrap: wrap on käytössä, kohteet, jotka eivät mahdu, siirtyvät uudelle riville, ja align-content jakaa silloin rivien välit.

Jokaisella kohteella on kolme kokoon vaikuttavaa ominaisuutta, jotka yleensä kirjoitetaan yhdessä flex-ominaisuudeksi:

• flex-basis: lähtökoko (auto käyttää sisältöä tai width-arvoa);
• flex-grow: kuinka suuren osan vapaasta tilasta kohde ottaa (0 = ei mitään, 1 = yhtä suuri osuus);
• flex-shrink: kuinka paljon se luovuttaa, kun tilaa on vähän (0 = ei koskaan kutistu).

Sivupalkki-esiasetus näyttää klassisen mallin: sivupalkki, jolla on flex-basis: 200px ja flex-shrink: 0, sekä pääalue, jolla on flex-grow: 1.

CSS Grid pähkinänkuoressa

Grid asettelee kohteet kahdessa ulottuvuudessa. grid-template-columns: repeat(3, 1fr) luo kolme yhtä leveää saraketta. fr on osuus vapaasta tilasta. repeat(auto-fill, minmax(120px, 1fr)) luo niin monta vähintään 120 pikselin levyistä saraketta kuin mahtuu, mikä tekee responsiivisen korttiruudukon ilman mediakyselyjä.

Kohteet täyttävät solut järjestyksessä, ellet sijoita niitä: grid-column: span 2 tekee kohteesta kaksi saraketta leveän ja grid-column: 1 / -1 venyttää sen koko rivin yli.

grid-template-areas antaa sinun piirtää asettelun nimillä. Kirjoita yksi rivi per rivi, esimerkiksi header header ja sitten nav main, ja anna kohteille grid-area: header tai grid-area: main. Piste merkitsee tyhjää solua. Jokaisella rivillä on oltava sama määrä soluja, ja jokaisen nimen on muodostettava suorakulmio. Työkalu varoittaa muuten.