Samenvatting
Samenvatting Lay-out html uitgelegd
- Vak
- Web Technology
- Instelling
- Arteveldehogeschool (Artevelde)
Lay-out html uitgelegd
[Meer zien]Voorbeeld 3 van de 24 pagina's
Voorbeeld 3 van de 24 pagina's
In winkelwagenVerkoper
Volgen
Voorbeeld van de inhoud
Web TechnologyDefault/standaardwaarde = waarde die wordt gebruikt wanneer een geen andere wordt
opgegeven
Lay-out
Position: Lay-out en Flow
Doel: elementen op webpagina dynamisch positioneren ZONDER float/position
Functie: width en height van child automatisch aanpassen
Beste manier de ruimte van container gebruiken
Bekangrijk voor responsive & mobiel-vriendelijke webpagina’s
2 hoofdcategorieën:
- Container
- Items
Basisprincipes
Flexbox items plaats:
- Op main axis
o Van main start – main end
- Op cross axis
o Van cross start – cross end
Main axis = hoofdas van flexbox
Items worden hierop geplaatst
Flexbox-direction = richting instellen van items
Main start & end = start- en eindpunt van hoofdas
Items worden hierop geplaatst in container
Main size = width + height van items
Die bepalen grootte van de as
Cross axis = as die loodrecht op main axis staat
Richting = bepaald door richting van hoofdas
Cross start & end = start- en eindpunt
Hiertussen worden items geplaatst
Cross size = width + height van items
Die bepalen grootte van as
Flexbox container = parent
Volgende eigenschappen zijn allemaal toepasbaar op flexbox container elementen
, Parent element die flexbox items zal bevatten
Display
Standaardwaarde = block / inline
- Afhankelijk over welk html-element het gaat
Flexbox toepassen op alle elementen in container (dus op alle children):
- Display = flex
- Display = inline-flex
.container {
display: flex; /* of inline-flex */
}
In onderstaand voorbeeld zien we hoe door middel
van flexbox onze items (blok 1-6) automatisch de beschikbare ruimte van onze container
kunnen laten gebruiken voor het naast elkaar tonen van de blokken.
Flex-direction
= richting van items in container instellen
Standaardwaarde = row Items uitgezet van links naar rechts
- Row
- Row-reverse
- Column
- Column-reverse
.container {
display: flex;
flex-direction: row-reverse;
}
alle mogelijke waarden voor flexbox-direction:
Flex-wrap
, Flex-wrap op no-wrap browser gaat proberen alle items in container doen passen op 1
Lijn
Wrap / wrap-reverse items op de volgende lijn(en) zetten
.container {
display: flex;
flex-wrap: wrap;
}
alle mogelijke waarden voor flex-wrap:
Justify-content
= instellen hoe:
- Items in container verdeeld moeten zijn over main axis (hoofdas)
- Er omgegaan moet worden met witruimte in container
Standaardwaarde = flex-start witruimte komt aan rechterkant van items
- Flex-end
- Center
- Space-between
- Space-around
- Space-evenly
.container {
display: flex;
justify-content: center;
}
alle mogelijke waarden voor justify-content:
Voordelen van het kopen van samenvattingen bij Stuvia op een rij:
√ Verzekerd van kwaliteit door reviews
Stuvia-klanten hebben meer dan 700.000 samenvattingen beoordeeld. Zo weet je zeker dat je de beste documenten koopt!
Snel en makkelijk kopen
Je betaalt supersnel en eenmalig met iDeal, Bancontact of creditcard voor de samenvatting. Zonder lidmaatschap.
Focus op de essentie
Samenvattingen worden geschreven voor en door anderen. Daarom zijn de samenvattingen altijd betrouwbaar en actueel. Zo kom je snel tot de kern!
Veelgestelde vragen
Wat krijg ik als ik dit document koop?
Je krijgt een PDF, die direct beschikbaar is na je aankoop. Het gekochte document is altijd, overal en oneindig toegankelijk via je profiel.
Tevredenheidsgarantie: hoe werkt dat?
Onze tevredenheidsgarantie zorgt ervoor dat je altijd een studiedocument vindt dat goed bij je past. Je vult een formulier in en onze klantenservice regelt de rest.
Van wie koop ik deze samenvatting?
Stuvia is een marktplaats, je koop dit document dus niet van ons, maar van verkoper rhunedepoortere. Stuvia faciliteert de betaling aan de verkoper.
Zit ik meteen vast aan een abonnement?
Nee, je koopt alleen deze samenvatting voor €6,59. Je zit daarna nergens aan vast.
Is Stuvia te vertrouwen?
4,6 sterren op Google & Trustpilot (+1000 reviews)
Afgelopen 30 dagen zijn er 67474 samenvattingen verkocht
Opgericht in 2010, al 14 jaar dé plek om samenvattingen te kopen