Met flexbox kunnen we blokken met code uitlijnen op onze pagina. Meestal gebruiken we daarvoor de div
-tag.
In dit voorbeeld zullen 4 verschillende soorten uitlijning laten zien op een pagina regel.
Voor dit voorbeeld is onderstaande code gebruikt.
<style> /* Let op de style komt natuurlijk in een stylesheet, dit is alleen als voorbeeld */ body { margin: 0; } div > div { /* elke div in een div krijgt deze eigenschappen */ background-color: blue; width: 60px; height: 40px; } .block { display: flex; gap: 20px; /* Ruimte tussen de blokken */ margin: 10px; /* ruimte om het blok heen */ } .start { justify-content: flex-start; /* zet alles links */ } .end { justify-content: flex-end; /* zet alles rechts */ } .center { justify-content: center; /*zet alles in het midden*/ } .between { justify-content: space-between; /* vult de gehele ruimte op */ } </style> <h3>display:flex; justify-content:flex-start; (class="block start)"</h3> <div class="block start"> <div>...</div> <div>...</div> <div>...</div> </div> <h3>display:flex; justify-content:flex-end; (class="block end)"</h3> <div class="block end"> <div>...</div> <div>...</div> <div>...</div> </div> <h3>display:flex; justify-content:flex-center; (class="block center)"</h3> <div class="block center"> <div>...</div> <div>...</div> <div>...</div> </div> <h3>display:flex; justify-content:space-between; (class="block between)"</h3> <div class="block between"> <div>...</div> <div>...</div> <div>...</div> </div>
Dus door een combinatie van display: flex;
en justify-content: ...;
kan je de div
-elementen daarbinnen uitlijnen. (Dit hoeven overigens geen div
-elementen te zijn. Het werkt bijna met elke HTML tag.