The Flexible Box Module

Tijdens het project voor The Imagineers ga ik voor het eerst sinds mijn vooropleiding verder met het leren van HTML en CSS. Wij zijn nu bijna op het punt dat wij het ontwerp gerealiseerd hebben in React maar hierbij ben ik eerst tegen een klein probleempje aangelopen met betrekking tot de pagina layout.

Als eerst heb ik een informatiepagina gemaakt wat zonder problemen werkte op de manier die ik ben aangeleerd. Ik heb hiervoor twee container divs gemaakt met een breedte van 50% en heb ze over de pagina verdeeld met een float. Voor de uitlegpagina moesten de kanten van de pagina omgewisseld worden en ik dacht dat dit zo simpel zou zijn als de float omwisselen maar dat ging niet helemaal goed.

Dit probleem kwam door de manier waarop ik de tekst content verticaal centreerde met:

position: absolute;

top: 50%;

-ms-transform: translateY(-50%);

transform: translateY(-50%);  

Door de position: absolute bleef de content niet binnen de container die ik had gemaakt. Ik ben opzoek gegaan naar een oplossing voor dit probleem en vond CSS Flexbox. 

Simpel uitgelegd kan je met flexbox je pagina opdelen in rows en columns. Hiermee kan je het indelen van je webpagina heel erg vereenvoudigen. Het enige dat ik nodig had voor de indeling van deze pagina was dit stukje CSS.

#container{

    display: flex;

    align-items: center;

}

#explanation-container{

    flex: 50%;

    order: 0;

    

    padding-left: 4%;

    padding-right: 4%; 

}

#tool-container-ep{

    flex: 50%;

    order: 1;

}

Op deze manier is het veel makkelijker te doen, de flexbox centreert alle content ook direct wanneer ik dat meegeef. Daarnaast blijft de code voor mij en de rest van de groep overzichtelijker en als ik toch de pagina weer wil flippen hoef ik alleen maar de order: 0; aan te passen. Wat een top systeem.