Resume
Samenvatting Lay-out html uitgelegd
- Cours
- Web Technology
- Établissement
- Arteveldehogeschool (Artevelde)
Lay-out html uitgelegd
[Montrer plus]
Vendeur
S'abonner
Aperçu du contenu
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:
Les avantages d'acheter des résumés chez Stuvia:
Qualité garantie par les avis des clients
Les clients de Stuvia ont évalués plus de 700 000 résumés. C'est comme ça que vous savez que vous achetez les meilleurs documents.
L’achat facile et rapide
Vous pouvez payer rapidement avec iDeal, carte de crédit ou Stuvia-crédit pour les résumés. Il n'y a pas d'adhésion nécessaire.
Focus sur l’essentiel
Vos camarades écrivent eux-mêmes les notes d’étude, c’est pourquoi les documents sont toujours fiables et à jour. Cela garantit que vous arrivez rapidement au coeur du matériel.
Foire aux questions
Qu'est-ce que j'obtiens en achetant ce document ?
Vous obtenez un PDF, disponible immédiatement après votre achat. Le document acheté est accessible à tout moment, n'importe où et indéfiniment via votre profil.
Garantie de remboursement : comment ça marche ?
Notre garantie de satisfaction garantit que vous trouverez toujours un document d'étude qui vous convient. Vous remplissez un formulaire et notre équipe du service client s'occupe du reste.
Auprès de qui est-ce que j'achète ce résumé ?
Stuvia est une place de marché. Alors, vous n'achetez donc pas ce document chez nous, mais auprès du vendeur rhunedepoortere. Stuvia facilite les paiements au vendeur.
Est-ce que j'aurai un abonnement?
Non, vous n'achetez ce résumé que pour €6,59. Vous n'êtes lié à rien après votre achat.
Peut-on faire confiance à Stuvia ?
4.6 étoiles sur Google & Trustpilot (+1000 avis)
64438 résumés ont été vendus ces 30 derniers jours
Fondée en 2010, la référence pour acheter des résumés depuis déjà 14 ans