Summary
Samenvatting Lay-out html uitgelegd
- Course
- Institution
Lay-out html uitgelegd
[Show more]
Seller
Follow
rhunedepoortere
Content preview
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:
The benefits of buying summaries with Stuvia:
Guaranteed quality through customer reviews
Stuvia customers have reviewed more than 700,000 summaries. This how you know that you are buying the best documents.
Quick and easy check-out
You can quickly pay through credit card or Stuvia-credit for the summaries. There is no membership needed.
Focus on what matters
Your fellow students write the study notes themselves, which is why the documents are always reliable and up-to-date. This ensures you quickly get to the core!
Frequently asked questions
What do I get when I buy this document?
You get a PDF, available immediately after your purchase. The purchased document is accessible anytime, anywhere and indefinitely through your profile.
Satisfaction guarantee: how does it work?
Our satisfaction guarantee ensures that you always find a study document that suits you well. You fill out a form, and our customer service team takes care of the rest.
Who am I buying these notes from?
Stuvia is a marketplace, so you are not buying this document from us, but from seller rhunedepoortere. Stuvia facilitates payment to the seller.
Will I be stuck with a subscription?
No, you only buy these notes for $7.07. You're not tied to anything after your purchase.
Can Stuvia be trusted?
4.6 stars on Google & Trustpilot (+1000 reviews)
67474 documents were sold in the last 30 days
Founded in 2010, the go-to place to buy study notes for 14 years now