Här kommer ord och begrepp som har med Flexbox att göra. Happy flexing!

Flexbox

Flexbox är en teknik för att styra placeringen av olika HTML element. Det kan vara rätt svårt att få grepp om och det är lätt att det blir lite fel i början. Men ge det lite tid och övning. För att använda flexbox på ett element gör man som exemplet nedan, men du kan såklart använda dina egna klasser och element.

.parent-element {
	display: flex;
}

Parent vs. child

I HTML finns en grundläggande struktur, vissa element är föräldrar och andra barn. Det har med dess hirarki att göra och hur du skriver din kod. När man använder flexbox är det alltid förälderns som styr hur barnen ska placera sig. I exemplet nedan är <section> taggen förälder till länkarna.

<section class="meny">
	<a href="shop.html">Till webbshoppen</a>
	<a href="contact.html">Kontakt</a>
	<a href="aboutUs.html">Om Oss</a>
</section>

Justify-content

Det är CSS-attributet som styr hur elementet ska placera sig horisontellt, du kan använda flex-start för att få alla till vänster, flex-end för alla till höger och center för alla i mitten.

Koden nedan kommer lägga alla meny-valen ovan bredvid varandra och i mitten.

.meny {
	display: flex;
	justify-content: center;
}