Flexbox CSS ja HTML (Opas) – kehitä responsiivisia ulkoasuja

Tätä odottaa sinua kurssilla Flexbox CSS:ssä ja HTML:ssä.

Mikä on Flexbox-muotoilu ja miksi sitä pitäisi ylipäätään käyttää?

Tässä on asetettu projekti, jossa sitten jatkossa työskennellään.

Esittelen tässä esimerkki rakenteen ja VS-Codessa integroidut debuggausmahdollisuudet MS Edge -työkalujen kanssa. Lisäksi tässä videossa ensimmäistä kertaa aktivoituu flexbox-layout ja määritellään suunta.

Miten jaetaan tila tasaisesti tai tietyissä suhteissa Flexbox-layoutissa?

Pieni harjoitus, jossa yksinkertaista matematiikkaa ei voi välttää.

Tässä esittelen vaakasuuntaisen asettelun kahdella sivupalkilla, joka mukautuu responsiivisesti leveyteen.

Lapsielementtejä voidaan kohdistaa joustavassa säiliössä vaakasuunnassa. Tässä näytän, miten tämä voidaan asettaa.

Ei vain säiliössä voi asettaa kaikkien lapsielementtien suuntauksen, align-self antaa myös säätää yksittäisten elementtien asentoa eri tavalla.

Pieni harjoitus yksittäisten noppaohjeiden kanssa.

Ei vain poikittaisakselin suuntaan voi kohdistaa järjestelyä joustavassa kontissa, myös pitkittäisakselin suuntaan on mahdollista säätää suuntausta.

Pieni esimerkki siitä, miten pääakselin suuntautuminen voidaan hyödyntää erittäin hyvin yleisessä asettelussa.

Joka haluaa olla joustava, on pystyttävä määrittämään lapsielementtien koko riippumatta tietystä leveydestä tai korkeudesta. Onneksi on olemassa flex-basis-ominaisuus, jonka avulla tämä on mahdollista saavuttaa. Muuttamalla flex-direction, leveydestä tulee korkeus ja päinvastoin. 

Kuinka paljon elementin tulee kasvaa, jos tilaa on enemmän kuin flex-basis määrittää? Tätä voidaan säätää tarkasti käyttäen flex-grow.

Kuinka paljon elementin tulisi kutistua, jos tila on pienempi kuin flex-basis määrittää? Tätä voidaan hallita tarkasti käyttämällä flex-shrink -ominaisuutta. 

Lapsielementit eivät voi ainoastaan kutistua, kun tilaa on vähemmän, vaan ne voivat myös katketa säiliöstä. Miten tämä tehdään flex-wrap avulla, näytän tässä videossa.

flex-suunta ja flex-kääri voidaan yhdistää ominaisuudessa flex-virtaus. Tämä on järkevää jopa silloin, kun haluaa asettaa vain flex-suunta, koska flex-virtaus on lyhyempi. ;-)

Tehtävä flex-wrapista.

Välillä on oltava etäisyyttä, jotta se ei tee ihmisen silmille tarpeettoman epämukavaa. Onneksi väli-niminen CSS-ominaisuus hoitaa tämän tarkasti joustavien kontinairien lapsielementeissä.

Järjestys on tärkeää, erityisesti verkkosivustojen käyttöliittymissä, koska niiden pitäisi olla hyvin käytettäviä. Järjestystä on joskus myös mukautettava yksilöllisesti ilman, että elementtejä siirretään DOM:issa. Tähän tarkoitukseen CSS-ominaisuus order on erittäin hyödyllinen, jonka avulla näkyvää järjestystä elementtejä voidaan helposti muuttaa.

Kokeillaan, oletteko ymmärtäneet järjestyksen. Täällä on jopa toinen mahdollisuus saavuttaa sama tulos, mutta olette varmasti myös huomanneet sen.

On erittäin yleistä, että halutaan keskittää elementtejä ja erityisesti tekstiä sekä vaaka- että pystysuunnassa (!). Se, mikä oli ennen joustilaatikkoa tuskaa, on nyt joustilaatikolla lasten leikkiä.

Kuka ei tunne sitä, 3-saraketta? Jos se vielä mahtuu käytettävissä olevaan tilaan, ei responsiiviseen suunnitteluun ole enää paljon jäljellä.

Onko verkkosivustoja ilman lomakkeita? Jos on, niin niitä ei ole paljon. Siksi on erittäin tärkeää järjestää ne houkuttelevasti, mikä onneksi Flexboxilla ei ole ongelma.

Usein joutuu tekemään sisäkkäisiä layout-rakenteita, mutta jouston avulla sellaiset eivät ole enää iso haaste.

Tällä hetkellä verkkokeskusteluasiakkaita on kuin hiekkaa meressä ja tekoälykeskustelurobotteja on tullut vielä lisää. Mutta miten voisi toteuttaa keskustelun Flexboxin avulla? Sen näytän tässä videossa.

Viimeistään Web 2.0:stä lähtien lähes joka sivustolla on galleria. Tässä videossa kuvaan, miten tällainen ulkoasu voidaan loistavasti toteuttaa esimerkiksi Flexboxilla.

Nyt kaiken pitäisi olla selvää, mitä tulee joustavaan asetteluun. Lopuksi kuvaan, mitä teidän tulisi olla oppineet, mitä voitte vielä tehdä ja mitä muita hienoja CSS-asettelumahdollisuuksia on olemassa.