CSS Layouts en Flexbox
Je hebt nu een goede basis in HTML en CSS, en je webpagina begint vorm te krijgen. In dit hoofdstuk gaan we een grote stap zetten in het verbeteren van de layout van je website door gebruik te maken van het CSS Box Model en Flexbox. Dit zal je helpen om je webpagina professioneler en responsiever te maken.
Wat ga je leren?
Begrijpen van het CSS Box Model: margins, borders, padding en content.
Introductie tot Flexbox voor geavanceerde lay-outs.
Hoe je flex containers en items opzet.
Elementen uitlijnen en ordenen met Flexbox.
Je webpagina herstructureren voor een betere layout.
CSS Box Model
Wat is het CSS Box Model?
In CSS wordt elk element op een webpagina beschouwd als een rechthoekige doos. Het CSS Box Model beschrijft deze doos en bestaat uit:
Content : De inhoud van het element (tekst, afbeeldingen, enz.).
Padding : Ruimte rondom de content, binnen de rand.
Border : De rand om de padding en content heen.
Margin : Ruimte buiten de rand, scheidt het element van andere elementen.
Visualisatie van het Box Model
Eigenschappen van het Box Model
Content : width , height
Padding : padding-top , padding-right , padding-bottom , padding-left
Border : border-width , border-style , border-color
Margin : margin-top , margin-right , margin-bottom , margin-left
Voorbeeld
.box {
width: 200px;
height: 100px;
padding: 10px;
border: 5px solid black;
margin: 20px;
}
Uitleg:
width en height bepalen de grootte van de content.
padding voegt ruimte toe binnen de border.
border definieert de rand rondom het element.
margin voegt ruimte toe buiten de border, tussen dit element en anderen.
Flexbox
Wat is Flexbox?
Flexbox, of de Flexible Box Layout Module , is een CSS3-layoutmodel dat het eenvoudiger maakt om responsive layouts te maken. Het is ontworpen om ruimte te verdelen en items uit te lijnen binnen een container, zelfs als hun grootte onbekend of dynamisch is.
Waarom Flexbox Gebruiken?
Eenvoudiger layoutbeheer : Geen floats of complexe marges meer.
Responsiviteit : Elementen passen zich automatisch aan verschillende schermgroottes aan.
Verticale en horizontale uitlijning : Makkelijk items centreren en positioneren.
Basisconcepten
Flex Container : Het element dat display: flex; krijgt.
Flex Items : De directe kinderen van de flex container.
Opzetten van een Flex Container
.container {
display: flex;
}
Belangrijke Flexbox Eigenschappen
Voor de Container
flex-direction : Bepaalt de richting van de flex items.
.container {
flex-direction: row; /* opties: row, row-reverse, column, column-reverse */
}
justify-content : Horizontale uitlijning van flex items.
.container {
justify-content: center; /* opties: flex-start, flex-end, center, space-between, space-around */
}
align-items : Verticale uitlijning van flex items.
.container {
align-items: center; /* opties: stretch, flex-start, flex-end, center, baseline */
}
flex-wrap : Bepaalt of flex items op meerdere regels kunnen staan.
.container {
flex-wrap: wrap; /* opties: nowrap, wrap, wrap-reverse */
}
Voor de Items
flex-grow : Bepaalt hoe een flex item groeit om beschikbare ruimte op te vullen.
.item {
flex-grow: 1; /* standaard is 0 */
}
flex-shrink : Bepaalt hoe een flex item krimpt als er minder ruimte is.
flex-basis : De basisgrootte van een element voordat ruimte wordt verdeeld.
Opdracht: Gebruik van Flexbox
Stap 1: Structureren van je HTML
Pas je index.html aan om een flex container en flex items te hebben.
Mijn Website
Stap 2: Maak je Navigatie Responsief met Flexbox
HTML
Zorg ervoor dat je navigatie-items binnen een
staan met de class nav-list .
CSS
/* Maak de nav-list een flex container */
.nav-list {
display: flex;
justify-content: center;
list-style: none;
padding: 0;
background-color: #00539C;
}
/* Stijl de navigatielinks */
.nav-list li {
margin: 0 15px;
}
.nav-list a {
color: white;
text-decoration: none;
font-weight: bold;
}
.nav-list a:hover {
text-decoration: underline;
}
Stap 3: Layout van de Hoofdinhoud met Flexbox
HTML
In je main -element heb je twee secties: .intro en .hobbies .
CSS
Maak van main een flex container en pas de layout aan.
main {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: flex-start;
flex-wrap: wrap;
margin: 20px;
}
/* Stijl de secties */
main section {
flex: 1 1 300px; /* flex-grow, flex-shrink, flex-basis */
margin: 10px;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ccc;
}
Uitleg:
flex-direction: row; zorgt ervoor dat de secties naast elkaar staan.
flex-wrap: wrap; zorgt ervoor dat de secties naar een nieuwe regel gaan als er niet genoeg ruimte is.
flex: 1 1 300px; betekent:
flex-grow: 1; – het item kan groeien als er ruimte is.
flex-shrink: 1; – het item kan krimpen als er minder ruimte is.
flex-basis: 300px; – de startbreedte is 300px.
Stap 4: Responsieve Afbeeldingen met Flexbox
HTML
Zet je afbeeldingen binnen een container.
CSS
Maak van .gallery een flex container.
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 20px;
}
.gallery img {
flex: 1 1 200px;
max-width: 300px;
margin: 10px;
height: auto;
}
Oefeningen
Oefening 1: Maak een Flexbox Layout voor je Footer
Wat te doen?
Maak van je
