Flexbox

Hva

I denne modulen skal vi se litt nærmere på hvordan vi kan organisere elementer inne i et annet element. Vi bruker CSS-egenskapen flex.

Se f.eks. Flexbox i CSS-spesifikasjonen [1] eller A Complere guide to Flexbox [2] eller Mozilla Developer Network [3]

I modulen Posisjonering ser vi på hvordan vi enkelt kan plassere et element i sentrum av et annet element blandt annet ved hjelp av flex, mens vi her skal se litt mer på flere muligheter.

Det er vanlig å framstille prinsippene i Flexbox slik:

Det er viktig å merke seg noen grunnleggende prinsipper:

Flexbox er en ren CSS-mekanisme og er ikke koplet til spesielle HTML-tager. Det vil si at både container og item i illustrasjonen over kan være f.eks. div eller article eller nav eller annet. Merk imidlertid at display mode for items alltid vil være block.
Beskrivelsen baseres på en hovedakse (main) og en perpendikulær akse (cross). Begrepene vertikal og horisontal inngår ikke i beskrivelsen. Dette er nettop fordi flexbox skal fungere når en enhet, f.eks. en mobiltelefon, roteres. En av hovedargumentene for flexbox er nettop å fungere i forbindelse med responsive design.

Noen eksempler

Vi bruker i alle eksemplene div-elementet både som container og som item, og fyller item-divene med litt forskjellig.

Eksempel1

Hallo

alle

sammen

.container1{
   display:  flex;
   display: -webkit-flex;
   flex-flow: row;
   -webkit-flex-flow: row;
    min-height: 100px;
}
.container1 > div{}

Eksempel2

Hallo

alle

sammen

.container2{
   display: flex;
   display: -webkit-flex;
   flex-direction: column-reverse;
   -webkit-flex-direction: column-reverse;
    /*row | row-reverse | column | column-reverse*/
    min-height: 100px;
}
.container2 > div{}

Eksempel3

Hallo

alle

sammen

.container3{
   display:         flex;
   display: -webkit-flex;
   flex-flow: row;
   -webkit-flex-flow: row;
   justify-content: center;
   -webkit-justify-content: center;
   /*flex-start | flex-end | center | space-between | space-around*/
   min-height: 100px;
}
.container3 > div{}

Eksempel4

Hallo

alle

sammen

.container4{
   display:  flex;
   display: -webkit-flex;
   flex-flow: row;
   -webkit-flex-flow: row;
   justify-content: space-around;
   -webkit-justify-content: space-around;
   /*flex-start | flex-end | center | space-between | space-around*/
    min-height: 100px;
}
.container4 > div{}

Eksempel5

Hallo

alle

sammen

.container5{
   display: flex;
   display: -webkit-flex;
   flex-flow: row;
   -webkit-flex-flow: row;
   align-items:center;
   -webkit-align-items:center;
    /* flex-start | flex-end | center | baseline | stretch*/
   justify-content: space-around;
   -webkit-justify-content: space-around;
   /*flex-start | flex-end | center | space-between | space-around*/
   min-height: 100px;
}
.container5 > div:nth-child(4){
    order:-1; /* ? */
}

Eksempel6

Hallo

alle

sammen

.container6{
   display: flex;
   display: -webkit-flex;
   flex-flow: row;
   -webkit-flex-flow: row;
   align-items:center;
   -webkit-align-items:center;
    /* flex-start | flex-end | center | baseline | stretch*/
   justify-content: space-around;
   -webkit-justify-content: space-around;
   /*flex-start | flex-end | center | space-between | space-around*/
   min-height: 100px;
}
.container6 > div{
    flex-grow:1;
    -webkit-flex-grow:1;
    /* flex-grow | flex-shrink | flex-basis */
    text-align:center;
    border-style:none;
}
.container6 > div:nth-child(4){
    flex-grow:3;
    -webkit-flex-grow:3;
}

Mal

Den siden du sr på nå og (nesten) alle andre sider i dette materialet er bygget opp med en struktur basert på flex.

Du kan inspisere denne strukturen på denne siden:
mal.html https://borres.hiof.no/wep/css/flex/mal.html

Referanser

Flexbox i CSS-spesifikasjonen W3C www.w3.org/TR/css3-flexbox/ 02-10-2015

A Complere guide to Flexbox The Lodge css-tricks.com/snippets/css/a-guide-to-flexbox/ 02-10-2015

Mozilla Developer Network MDN developer.mozilla.org/en-US/docs/Web/CSS 02-10-2015