HTML & CSS Les 5 – Uitlijnen

Je hebt al eerder geleerd dat je tekst en afbeeldingen in CSS horizontaal kunt uitlijnen met text-align. Verticaal uitlijnen gaat iets ingewikkelder. Daarom hebben we in deze pagina geprobeerd om een zo eenduidig mogelijk advies te geven. Wij gebruiken de “Flex” methode.

Hoe kun je inhoud op je pagina zowel verticaal als horizontaal uitlijnen?

1. We gaan er van uit dat je een div in je grid hebt, en dat je inhoud in die div in het midden wilt uitlijnen. In dit voorbeeld gebruiken me ‘#mijnDiv’.

   body{
       display: grid;
       grid-template-columns: 33vw 33vw 33vw ;
       grid-template-rows: 33vh 33vh 33vh ;
   }
   
   #mijnDiv{
       grid-column: 2/3;
       grid-row: 2/3;
       background-color: aquamarine;
   }
   

   
   Je ziet dat elementen in HTML standaard linksboven worden uitgelijnd.

2. Voeg de “Flex” methode toe voor het uitlijnen. (regel 7 t/m 10)

   #mijnDiv{
       grid-column: 2/3;
       grid-row: 2/3;
       background-color: aquamarine;
   
       /*Dit is de Flex methode om content in het midden uit te lijnen*/
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
   }
   

   
   Dit zou moeten resulteren in het centreren van de tekst (en/of afbeeldingen) in de div, zowel horizontaal als verticaal.

Uitleg: In een div kun je text-align: center ofalign-items: center gebruiken, dit kan elementen horizontaal uitlijnen, maar dit centreert de elementen niet verticaal. Zonder Flex is dat erg moeilijk om dit te doen. Dit is wat ons betreft de eenvoudigste manier, hoewel je misschien ook andere kunt vinden.

3. Laten we meer inhoud aan de div toevoegen en kijken hoe deze zich gedraagt:

   <div id="mijnDiv">
       <a href="#">Can you</a>
       <a href="#">please</a>
       <a href="#">center me</a> 
   </div>
   

   
   Zoals je kunt zien heb ik wat links toegevoegd.

4. Laten we eens kijken naar de andere opties om elementen uit elkaar te plaatsen. In de #mijnDiv CSS vervangen we justify-content: center; met justify-content: space-between;
justify-content: space-between;

   justify-content: space-around;

   justify-content: space-evenly;

5. Vervang nu flex-direction: column; me flex-direction: row; en kijk wat er gebeurt met elk van de vorige justifications (justify-content:):

   space-evenly
space-around
space-between

6. Wat kun je nog meer doen om de positie van elementen te regelen?

       align-items: flex-end;
       justify-content: flex-end;
   

   
   Met flex-end wordt de inhoud horizontaal en/of verticaal naar het eind van de div gestuurd (in dit geval rechtsonder). Probeer ook flex-start voor het tegenovergestelde effect.

5. Uiteraard gedraagt een afbeelding zich hetzelfde als in onze laatste stap:
   

Web bronnen:
A Complete Guide to Flexbox
[1] W3Schools : justify-content
[2] Mozilla : justify-content