logo   Flexbox - Indlejret struktur




Se sidens program responsivt: (uden tekst) x; (med tekst) x.


Ofte vil der under design af en side være behov for at foretage en yderligere underopdeling af et eller flere af grundstrukturens felter. Det kan eksempelvis være en horisontal opdeling af 'header' eller 'main' eller en vertikal opdeling af en 'aside'.


I enhver sådan situation indlægges både individuel HTML- og CSS-kode:


HTML


Grundstrukturens HTML-kode ændres således (her for 'main for 3 felter):


Fra
<main><h2>Brødtekst</h2></main>
Til
<main> <!-- main start -->
   <div id="left">Brødtekst left</div>
   <div id="center">Brødtekst center</div>
   <div id="right">Brødtekst right</div>
</main> <!-- main slut -->


CSS


Til styring af en Flexbox skal der anvendes tre selektorer til:


  • Styring af Flexboxen
    Selektoren skal som minimum indeholde de to deklarationer:
    display: flex;
    flex-flow: xxx;
  • Fælles styring af de indlejrede felter
    Her indsættes de deklarationer, der skal være gældende for alle felter.
  • Styring af det enkelte felt.
    For de enkelte felter skal der som minimum anvendes de to deklarationer:
    order: x;
    flex: x x xx%;


Horisontal indlejring i f.eks brødtekst eller header.


<style>
/* ------ INDLEJRING main------ */
main{
display: flex;
flex-flow: row wrap;
}

main > div#left, div#center, div#right{
width: 17.1%;
border-radius: 7px;
margin: .1%;
padding: 2%;
}

main > div#left{ order: 1; background: bisque; min-height: 400px; flex: 1 1 29%;}
main > div#center{ order: 2; background: burlywood; min-width: 200px; flex: 1 1 29%;}
main > div#right{ order: 3; background: NavajoWhite; flex: 1 1 29%;}
/* -------------------------- */
</style>


Vertikal indlejring af f.eks. aside


<style>
/* ------ INDLEJRING Aside ----- */
aside{
display: flex;
flex-flow: column;
background: plum;
}

aside > div#top, div#bottom{
border-radius: 7px;
margin: .1%;
padding: 2%;
}

aside > div#top{ order: 1; background: hotpink; min-width: 150px; min-height: 200px; flex: 0 1 28.9%;}
aside > div#bottom{ order: 2; background: lightcoral; min-width: 150px; min-height: 200px; flex: 0 1 28.9%;}
/* -------------------------- */
</style>























x
x