CSS Flexbox -asettelun perusteet
CSS Flexbox on tehokas asettelumalli, jota käytetään elementtien joustavaan järjestämiseen ja jakamiseen säiliön sisällä. Sen avulla voidaan luoda mukautuvia käyttöliittymiä, joissa elementtien koko ja järjestys mukautuvat käytettävissä olevan tilan mukaan. Flexbox-generaattori tarjoaa visuaalisen tavan hallita näitä sääntöjä reaaliajassa.
Asettelun rakentaminen perustuu kahteen tasoon: ulompaan säiliöön (flex container) ja sen sisällä oleviin elementteihin (flex items). Kun muokkaat asetuksia työkalussa, näet muutokset välittömästi visuaalisessa esikatselussa ja voit kopioida valmiin CSS-koodin suoraan projektiisi.
Säiliön ominaisuudet ja akselien toiminta
Flexbox-asettelun perusta on pääakseli (main axis) ja poikittaisakseli (cross axis). Niiden suunta määräytyy säiliön asetusten mukaan, mikä vaikuttaa suoraan siihen, miten elementit sijoittuvat ja kohdistuvat.
Säiliön keskeiset säätömahdollisuudet ovat:
- Suunta (Direction): Vaihtoehdot ovat Rivi (Row), Rivi käänteinen, Sarake (Column) ja Sarake käänteinen. Suunnan vaihtaminen rivistä sarakkeeksi vaihtaa pää- ja poikittaisakselin paikkaa keskenään. Tämä vaikuttaa suoraan siihen, miten kohdistusominaisuudet toimivat.
- Rivitys (Wrap): Vaihtoehtoina ovat Ei rivitystä, Rivitys ja Rivitys käänteinen. Kun valintana on Ei rivitystä, kaikki elementit pakotetaan yhdelle riville. Kun rivitys otetaan käyttöön, tilaa vaille jäävät elementit siirtyvät seuraavalle riville.
- Justify content: Määrittää elementtien kohdistuksen pääakselilla. Vaihtoehtoja ovat Start, End, Center, Space between, Space around ja Space evenly.
- Align items: Määrittää elementtien kohdistuksen poikittaisakselilla. Vaihtoehtoja ovat Start, End, Center, Stretch ja Baseline.
- Align content: Määrittää rivien välisen tilan jakautumisen silloin, kun rivitys on käytössä ja rivejä on useita. Vaihtoehtoina ovat Start, End, Center, Stretch, Space between, Space around ja Space evenly.
- Väli (Gap): Numeerinen arvo, joka määrittää elementtien ja rivien välisen tyhjän tilan suuruuden.
Elementtikohtaiset säädöt
Säiliön yleisten sääntöjen lisäksi jokaiselle yksittäiselle elementille voidaan määrittää omat säännöt, jotka ohittavat säiliön yleiset ohjeet tai muuttavat elementin käyttäytymistä suhteessa muihin. Kun klikkaat painiketta "Lisää elementti", asetteluun ilmestyy uusi osa, kuten "Elementti 5".
Yksittäisille elementeille voidaan määrittää seuraavat arvot:
- Järjestys (Order): Numeerinen arvo, joka määrittää elementin visuaalisen järjestyksen suhteessa muihin elementteihin.
- Grow: Numeerinen arvo, joka määrittää, kuinka paljon elementti voi kasvaa täyttääkseen säiliössä olevan vapaan tilan.
- Shrink: Numeerinen arvo, joka määrittää, kuinka paljon elementti voi kutistua, jos säiliössä ei ole riittävästi tilaa.
- Basis: Elementin aloitusleveys tai -korkeus ennen vapaan tilan jakamista. Vaihtoehtona on numeerinen arvo tai "Automaattinen basis".
- Align self: Mahdollistaa yksittäisen elementin kohdistuksen muuttamisen poikittaisakselilla. Vaihtoehdot ovat Auto, Start, End, Center, Stretch ja Baseline.
Vain niille elementeille, joiden ominaisuuksia on muutettu oletusarvoista, luodaan omat erilliset CSS-säännöt lopulliseen koodiin.
Yleiset asettelumallit
Flexbox-generaattorilla voidaan luoda ja testata useita verkkosivujen tyypillisiä asettelurakenteita:
| Asettelumalli | Kuvaus ja keskeiset asetukset |
|---|---|
| Keskitys | Elementin asettaminen täydellisesti keskelle säiliötä sekä vaaka- että pystysuunnassa. |
| Navigointipalkki | Linkkien jakaminen tasaisesti sivun ylälaitaan, usein käyttäen Space between -vaihtoehtoa. |
| Pino (Stack) | Elementtien asettaminen pystysuoraan jonoon käyttämällä Sarake (Column) -suuntaa. |
| Kortit | Useamman rinnakkaisen elementin ruudukko, jossa Rivitys siirtää kortit uudelle riville näytön koon pienentyessä. |
| Sivupalkki | Pääsisällön ja kapeamman sivupalkin rinnakkainen asettelu, jossa hyödynnetään Grow- ja Basis-arvoja. |
Tietosuoja ja tekniset tiedot
Asettelun luominen ja koodin generointi tapahtuvat kokonaan paikallisesti. Asettelusi luodaan suoraan selaimessasi. Mitään tekemiäsi asetuksia ei lähetetä BroBroGo-palveluun.
Kun olet tyytyväinen asetteluun, voit klikata painiketta "Kopioi CSS", jolloin painikkeen tilaksi muuttuu "Copied" ja valmis koodi on käytettävissäsi.
Usein kysytyt kysymykset
Mitä eroa on justify-content- ja align-items-ominaisuuksilla?
Justify-content asettaa elementit pääakselin suuntaisesti – eli rivin tai sarakkeen kulkusuunnassa – kun taas align-items sijoittaa ne poikittaisakselille. Kun vaihdat suunnan rivistä sarakkeeksi, nämä kaksi akselia vaihtavat paikkaa, jolloin justify-content alkaa toimia ylhäältä alas ja align-items vasemmalta oikealle.
Miten elementtikohtaiset säädöt toimivat?
Valitse elementti sen numeron perusteella ja määritä sitten, kuinka paljon se kasvaa täyttääkseen vapaan tilan (grow), kuinka paljon se kutistuu tilan ollessa tiukka (shrink), sen aloitusleveys (basis) ja sen oma kohdistus poikittaisakselilla. Järjestys (order) siirtää elementtiä aiemmaksi tai myöhemmäksi näytöllä koskematta HTML-koodiin. Vain ne elementit, joita todella muutat, saavat oman sääntönsä CSS-koodiin.
Milloin wrap- ja align-content-ominaisuuksilla on merkitystä?
Kun rivitys (wrap) on pois päältä, jokainen elementti pakotetaan yhdelle riville ja niitä voidaan puristaa kapeammiksi. Kun otat sen käyttöön, elementit, jotka eivät enää mahdu, siirtyvät seuraavalle riville – tällöin align-content astuu kuvaan ja määrittää rivien välit ryhmänä. Gap asettaa elementtien ja rivien välisen etäisyyden ilman ulkovälejä (margin).