Sähköinen asiointipalvelu, johdanto

Sorakuilu

Flex

Lähteitä: css-tricks.com
Jyväskyän yliopiston materiaalia

Flex

Sopii layoutina pieniin kohteisiin, isommissa kannattaa käyttää Grid:iä.

Idea on antaa mahdollisuus elementtien leveyden/korkeuden muuntumismahdollisuus käytettävän tilan mukaan.

Flex container (säiliö, parent, äiti) laajentaa tai kutistaa sisällään olevia osia (items, children, lapset).

Flexbox layout ei sitoudu suuntiin samalla tavalla kuin perinteiset. Perinteisistä:

Flex-asemointi tehdään säiliöiden ja niiden sisälle tulevien sisältöalueiden (items) avulla.

flex-container

flex items

Flex containerin ominaisuuksia

Määrittää containerin

.container {
  display: flex; /* or inline-flex */
}

flex-direction

flex

flex-wrap

flex

flex-flow

Yhdistää kaksi edellistä: oletusarvo on row nowrap

flex

align-items

flex

align-content

flex

Flex items (lasten) ominaisuuksia

order

Oletusarvoisesti lapset sijoitetaan lähdekoodin kirjoitusjärjestykseen.

Ne voi myös sijoittaa css:n avulla laittamalla järjestys css:ään

.
.item {
  order: 5; /* default is 0 */
}

flex items

flex-grow

Ominaisuus mahdollistaa lapsen koon muutoksen tarpeen mukaan. Se hyväksyy yksiköttömän arvon (toimii siis suhteellisena), joka kertoo kuinka paljon käytettävissä olevasta tilasta voidaan ottaa lapsen käyttöön.

Jos kaikkien lasten flex-grow on 1, säiliön jäljellä oleva tila jaetaan tasan lapsille. Jos arvo on kaksi, yritetään lapselle ottaa kaksi kertaan enemmän tilaa kuin muille.

Negatiiviset luvut eivät kelpaa.

.item {
  flex-grow: 4; /* default 0 */
}

flex items

flex-shrink

Ominaisuus mahdollistaa elementin kutistamisen. Neagtiiviset luvut eivät kelpaa.

.item {
  flex-shrink: 3; /* default 1 */
}

flex-basis

Ominaisuus määrittää elementin oletuskoon ennenkuin jäljellä olevaa tilaa jaetaan muille. Se voi olla leveys (esim. 20%, 5rem jne.) tai avainsana. Avainsanoista auto tarkoittaa "elementin leveyden taim korkeuden mukaan", content avainsana taas tarkoittaa "määritä koko sisällön leveyden mukaan.

.item {
  flex-basis:  | auto; /* default auto */
}

Jos arvo on 0, sisällön ympärille ei laiteta tyhjää tilaa.

flex

Ominaisuus on lyhennelmä yhdistelmästä flex-grow, flex-shrink ja flex-basis. Kaksi viimeistä eivät ole pakollisia.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Tämän "oikotie" -ominaisuuden käyttöä suositellaan mielummin kuin yksittäisten ominaisuuksien määrittämistä.

align-self

Ominaisuus sallii oletustasauksen vaihtamisen elementin kohdalla.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

flex items

Huom. float, clear ja vertical-align eivät vaikuta flex-lapsiin.