CSS/Flexbox

< CSS

Flexbox eli flex on asettelu menetelmä, jolla elementit voidaan asetella yksiulotteisesti kuitenkin niin, että elementit rivittyvät toiselle uusille riveille. Elemetit voidaan tasata eri tavoin. Flexbox tulee sanoista flexible box eli joustava laatikko.

Flexbox-asettelu otetaan käyttöön elmentin lapsielementeille antamalla elementille display-ominaisuuden arvoksi flex.

#boksi {
    display: flex;
}

Flexboxilla on kaksi akselia. Ensimmäinen on akseli, johon elementit ladotaan. Se voi olla rivi (row') tai sarake (column) joko myötä- tai vastasuuntaan. Toisella akselilla on suunta, johon lisätään uusi rivi, kun elementit eivät mahdu nykyiselle riville. Tämä on ristikkäinen ensimmäiselle, ja se voi olla joko myötä- tai vastasuuntainen.

Pääakseli ja ristikkäinen akseli alaspäin lisääntyville riveille ladottaessa.

Flex-directionMuokkaa

Latomisen suunta asetetaan flex-direction-ominaisuuden arvoksi. Sen arvo voi olla

  • row,
  • row-reverse,
  • column tai
  • column-reverse.
#boksi {
    /* ... */
    flex-direction: row;
}
Suunta
Normaali Käänteinen
Rivit  
flex-direction: row;
 
flex-direction: row-reverse;
Sarakkeet  
flex-direction: column;
 
flex-direction: column-reverse;

Flex-wrapMuokkaa

Rivittymisen suunta asetetaan flex-wrap-ominaisuuden arvoksi. Sen arvo voi olla wrap tai wrap-reverse.

#boksi {
    /* ... */
    flex-wrap: wrap;
}

Yhdessä latomissuunnan kanssa saadaan siis kaikkiaan kahdeksan erilaista yhdistelmää. Kaavioissa 3 on elementti, joka ei mahdu riville tai sarakkeeseen.

RivitMuokkaa

Rivit rivittyvät oletuksena alaspäin.

Latominen
Rivitys flex-direction: row; flex-direction: row-reverse;
flex-wrap: wrap;    
flex-wrap: wrap-reverse;    

SarakkeetMuokkaa

Sarakkeet rivittyvät oletuksena tekstin lukusuuntaan. Esim. länsimaisilla kirjoitusjärjestelmillä oikealle.

Latominen
Rivitys flex-direction: column; flex-direction: column-reverse;
flex-wrap: wrap;    
flex-wrap: wrap-reverse;    

Justify-contentMuokkaa

Riveille ladottujen elmeenttien asettelu määrätään justify-content-ominaisuudella.

Arvot start ja end määrittyvät tekstin suunnan mukaan. Vasemmalta oikealla luettavilla kielillä start on sama kuin left ja end sama kuin right.