Flexbox - Ultimate CSS Flex -huijauslehti (animoitujen kaavioiden avulla!)

Tämä kattava CSS-flexbox-huijauslehti kattaa kaiken, mitä sinun tarvitsee tietää aloittaaksesi flexboxin käyttämisen web-projekteissasi.

CSS flexbox -asettelun avulla voit helposti muotoilla HTML: n. Flexbox helpottaa kohteiden kohdistamista pysty- ja vaakasuunnassa riveillä ja sarakkeilla. Kohteet "taipuvat" erikokoisiksi täyttämään tila. Se tekee reagoivan suunnittelun helpommaksi.

CSS flexbox on loistava käyttää verkkosivustosi tai sovelluksesi yleiseen ulkoasuun. Se on helppo oppia, sitä tuetaan kaikissa moderneissa selaimissa, eikä se vie niin kauan perusteiden selvittäminen. Tämän oppaan lopussa olet valmis aloittamaan flexboxin käyttämisen verkkoprojekteissasi.

Artikkelissa on hyödyllisiä animoituja gifejä Scott Domesilta, jotka tekevät flexboxista entistä helpommin ymmärrettävän ja visualisoitavan.

Kaikki CSS Flexbox -ominaisuudet

Tässä on luettelo kaikista CSS-flexbox-ominaisuuksista, joita voidaan käyttää elementtien sijoittamiseen CSS: ssä. Seuraavaksi näet, miten ne toimivat.

CSS, jota voidaan käyttää säilöön

display: flexbox | inline-flex; flex-direction: row | row-reverse | column | column-reverse; flex-wrap: nowrap | wrap | wrap-reverse; flex-flow:  ||  justify-content: flex-start | flex-end | center | space-between | space-around; align-items: flex-start | flex-end | center | baseline | stretch; align-content: flex-start | flex-end | center | space-between | space-around | stretch;

CSS, jota voidaan käyttää säilön kohteisiin / elementteihin

order: ; flex-grow: ; /* default 0 */ flex-shrink: ; /* default 1 */ flex-basis:  | auto; /* default auto */ flex: none | [  ? ||  ] align-self: auto | flex-start | flex-end | center | baseline | stretch;

Terminologia

Ennen kuin opit, mitä flexbox-ominaisuudet tekevät, on tärkeää ymmärtää liittyvä terminologia. Tässä on määritelmät tärkeimmistä flexbox-termeistä, jotka on otettu virallisesta W3C-määritelmästä flexboxille.

pääakseli : Joustosäiliön pääakseli on pääakseli, jota pitkin joustavat esineet asetetaan. Suunta perustuu joustavan suunnan ominaisuuteen.
pääaloitus | pääpää :Joustavat esineet sijoitetaan säiliöön alkaen pääaloituspuolelta ja kohti pääpäätä.
pääkoko : Joustavan säiliön tai joustavan tuotteen leveys tai korkeus sen mukaan, kumpi on päämitassa, on kyseisen laatikon pääkoko. Sen pääkoko-ominaisuus on siis joko leveys- tai korkeusominaisuus sen mukaan, kumpi on pääulottuvuudessa.
poikittaisakseli : Pääakseliin kohtisuoraa akselia kutsutaan poikkiakseliksi. Sen suunta riippuu pääakselin suunnasta.
ristikäynnistys | poikkipinta : Joustolinjat täytetään esineillä ja sijoitetaan säiliöön alkaen joustosäiliön ristin aloituspuolelta ja kohti poikittaispuolta.
ristikoko : Joustavan tuotteen leveys tai korkeus, riippuen siitä, mikä on ristimitassa, on kohteen ristikoko. Ristikoko-ominaisuus on kumpi tahansa leveydestä tai korkeudesta, joka on ristimitassa.

CSS-näyttö Flex

display: flex on kertoo selaimellesi: "Haluan käyttää flexboxia tämän säilön kanssa, kiitos."

divElementti oletuksena display:block. Tämän näyttöasetuksen sisältävä elementti vie koko linjan, jolla se on. Tässä on esimerkki neljästä värillisestä div: sta vanhemman div: ssä oletusnäyttöasetuksella:

Jos haluat käyttää flexboxia sivusi osassa, muuta ensin ylätason säilö joustavaksi säilöksi lisäämällä display: flex;ylätason säilön CSS: ään.

Tämä alustaa tämän säilön joustavaksi säilöksi ja soveltaa joitain oletusjoustoja.

Joustava suunta

flex-directionvoit hallita, miten säilön kohteet näkyvät. Haluatko heidät vasemmalta oikealle, oikealta vasemmalle, ylhäältä alas tai alhaalta ylös? Voit tehdä kaikki nämä helposti asettamalla flex-directionsäiliön.

Oletusjärjestely hakemisen jälkeen display: flexon, että tuotteet järjestetään pääakselia pitkin vasemmalta oikealle. Alla oleva animaatio näyttää, mitä tapahtuu, kun flex-direction: columnse lisätään konttielementtiin.

Voit myös asettaa flex-directionon row-reverseja column-reverse.

Perusta sisältö

justify-contenton ominaisuus, jolla säiliössä olevat kohteet kohdistetaan pääakselia pitkin (katso yllä olevaa terminologiakaaviota). Tämä muuttuu sisällön näyttötavan mukaan. Sen avulla voimme täyttää kaikki tyhjät tilat riveillä ja määrittää, miten haluamme 'perustella' sen.

Tässä ovat yleisimpiä vaihtoehtoja perustella sisältö: flex-start | flex-end | center | space-between | space-around.

Näin eri vaihtoehdot näyttävät:

space-betweenjakaa kohteet siten, että ensimmäinen kohde on samassa tasossa aloituksen kanssa ja viimeinen on samassa tasossa lopun kanssa. space-aroundon samanlainen, mutta esineissä on puolikokoinen tila kummassakin päässä.

Joustavat kohdat

align-itemsavulla voimme kohdistaa kohteita poikittaisakselilla (katso yllä olevaa terminologiakaaviota). Tämä mahdollistaa sisällön sijoittamisen monin eri tavoin käyttämällä perusteltua sisältöä ja tasaamaan kohteita yhteen.

Tässä ovat yleisimmät kohteiden tasaamiseen käytettävät vaihtoehdot: flex-start | flex-end | center | baseline | stretch

Jotta stretchtoimisi odotetusti, elementtien korkeus on asetettava autotietyn korkeuden sijasta.

Tämä animaatio näyttää miltä vaihtoehdot näyttävät:

Nyt käytämme molempia justify-contentja align-items. Tämä osoittaa eron pääakselien ja poikkiakselien välillä.

Kohdista Itse

align-self voit säätää yhden elementin kohdistusta.

Sillä on kaikki samat ominaisuudet align-items.

Seuraavassa animaatiossa vanhemmalla divilla on CSS align-items: centerja flex-direction: row. Kaksi ensimmäistä neliötä selaa eri align-selfarvoja.

Flex Wrap

Flexbox yrittää oletusarvoisesti sijoittaa kaikki elementit yhdelle riville. Voit kuitenkin muuttaa tämän flex-wrapomaisuudella. Voit määrittää kolme arvoa, kun elementit siirtyvät toiselle riville.

Oletusarvo on flex-wrap: nowrap. Tämä saa kaiken pysymään yhdellä rivillä vasemmalta oikealle.

flex-wrap: wrap antaa kohteiden siirtyä seuraavalle riville, jos ensimmäisellä rivillä ei ole tarpeeksi tilaa. Kohteet näytetään vasemmalta oikealle.

flex-wrap: wrap-reverse sallii myös kohteiden siirtymisen seuraavalle riville, mutta tällä kertaa kohteet näytetään oikealta vasemmalle.

Joustava virtaus

flex-flowyhdistää käytön flex-wrapja flex-directionyhdeksi omaisuudeksi. Sitä käytetään asettamalla ensin suunta ja sitten kääre. Tässä on esimerkki:flex-flow: column wrap;

Tasaa sisältö

align-contentkäytetään kohteiden tasaamiseen useilla riveillä. Se on kohdistettu poikkiakselille, eikä sillä ole vaikutusta sisältöön, joka on yksi rivi.

Pystysuuntainen keskitys Flexboxilla

Jos haluat keskittää kaiken sisällön pystysuoraan pääelementin sisälle, käytä align-items. Tässä on käytettävä koodi:

.parent { display: flex; align-items: center; }

Pelit ja sovellukset

Jos haluat harjoitella flexboxin käyttöä, kokeile näitä pelejä ja sovelluksia, jotka auttavat sinua hallitsemaan flexboxia.

Flexbox Defense on verkkopeli, jossa opit flexboxia samalla, kun yrität estää saapuvia vihollisia pääsemästä puolustustasi ohi.
Flexbox Froggy on peli, jossa autat Froggya ja ystäviä kirjoittamalla CSS-koodin.
Flexyboxes on sovellus, jonka avulla voit nähdä koodinäytteitä ja muuttaa parametreja nähdäksesi, miten Flexbox toimii visuaalisesti.
Flexbox Patters on verkkosivusto, joka näyttää joukon Flexbox-esimerkkejä.

Johtopäätös

Olemme käsitelleet kaikki yleisimmät CSS-flexbox-ominaisuudet. Seuraava vaihe on harjoittelu! Kokeile tehdä muutama projekti flexboxilla, jotta voit tottua sen toimintaan.