Grid
Zo ziet de basic layout van een html pagina eruit:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
</header>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>
html-structuur
Dit is eigenlijk de basis van een webpagina en bepaalt hoe een webpagina is opgebouwd. Deze structuur
zorgt ervoor dat browsers en zoekmachines, zoals Google, de inhoud van de pagina goed kunnen verwerken,
interpreteren en weergeven.
Doctype
Dit is de eerste regel van een html-pagina. Dit laat de browser weten dat dit een html pagina is en
welke versie van html er gebruikt wordt.
<html>
Tussen de deze tag bevindt zich alle html-code inclusief 2 hele belangrijke tags, namelijk de
head en body.
<head>
tussen deze tag bevindt zich de meta data van de pagina, bijvoorbeeld de <title> en <links>
van
stylesheets. ook bevat het de
<meta> tag. Hierin zit data om ervoor te zorgen dat de browser de pagina juist inlaat. De meta
tags zijn niet zichtbaar in de pagina. maar zorgen ervoor dat de pagina juist geladen moet
worden.
<body>
Hier bevindt zich alle zichtbare inhoud van een pagina, bijvoorbeeld de <img> <p> etc.. .
Flexbox
Flexbox kun je gebruiken voor het maken van flexibele layouts in css. Het is belangrijk dat je css properties voor de parent en child-elementen onderscheidt.
<section class="parent-container">
<di class="child-element">item1</di>
<di class="child-element">item2</di>
<di class="child-element">item3</di>
<di class="child-element">item4</di>
<di class="child-element">item5</di>
<di class="child-element">item6</di>
<di class="child-element">item7</di>
</section>
Alle css-properties voor de parent-element:
.parent-container {
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: een waarde van flex-direction en een waarde van flex-wrap, dus bijvoorbeeld: row wrap-reverse;
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
align-items: stretch | flex-start | flex-end | center | baseline | ;
align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}
display: flex; hiermee maak je van je container een flex-container.
flex-direction: row;
flex-direction: row; De child-elementen worden als rows weergegeven:
.parent-container {
display: flex;
height: 100px;
border: 2px solid black;
flex-direction: row;
background-color: #a89a9a;
}
.child-element {
background-color: rgb(27, 147, 49);
border: 2px solid rgb(255, 255, 255);
}
flex-direction: row-reverse;
flex-direction: row-reverse; De child-elementen worden als rows weergegeven maar de tegenovergestelde richting:
.parent-container-row-reverse {
display: flex;
height: 100px;
border: 2px solid black;
flex-direction: row-reverse;
background-color: #a89a9a;
}
.child-element {
background-color: rgb(27, 147, 49);
border: 2px solid rgb(255, 255, 255);
}
flex-direction: column;
flex-direction: column; De child-elementen worden als kolommen weergegeven:
.parent-container-column {
display: flex;
height: 200px;
border: 2px solid black;
flex-direction: column;
background-color: #a89a9a;
}
.child-element {
background-color: rgb(27, 147, 49);
border: 2px solid rgb(255, 255, 255);
}
flex-direction: column-reverse;
flex-direction: column-reverse; De child-elementen in tegenovergestelde richting weergegeven:
.parent-container-column-reverse {
display: flex;
height: 200px;
border: 2px solid black;
flex-direction: column-reverse;
background-color: #a89a9a;
}
.child-element {
background-color: rgb(27, 147, 49);
border: 2px solid rgb(255, 255, 255);
}
flex-wrap: wrap;
flex-wrap: wrap; De child-elementen worden naast elkaar weergegeven als de elementen niet op 1 rij passen gaan automatisch door op de volgende regel:
flex-wrap: now-wrap;
flex-wrap: no-wrap; De child-elementen worden als rows weergegeven maar de tegenovergestelde richting: