Patronen met min-width en max-width
Beperk elementen met min-width en max-width tot comfortabele leesbreedtes.
Patronen met min-width en max-width is een gratis CSS Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus CSS Academy bevat in totaal 4 lessen.
Overzicht van min-width en max-width
min-width bepaalt de minimale grootte waartoe een element kan krimpen. max-width bepaalt de bovengrens. Samen creëren ze responsieve elementen die binnen een vastgelegd bereik kunnen meebewegen.
max-width voor leesbare inhoud
Lange tekstregels zijn moeilijk te lezen. Beperk tekstcontainers tot een comfortabele regellengte:
<article class="article" style="background:#4f8cff11;">This paragraph is capped at roughly 70 characters per line for comfortable reading, regardless of how wide its container is.</article>max-width voor gecentreerde containers
Het klassieke patroon voor een gecentreerde container met een maximale breedte:
<div class="container" style="background:#4f8cff11;border:1px solid #4f8cff;">Centered container, max-width: 1200px</div>min-width om inkrimpen te voorkomen
min-width voorkomt dat elementen kleiner worden dan een bruikbare afmeting:
<button class="button">OK</button>
<table class="data-table" style="border-collapse:collapse;margin-top:8px;">
<tr><th style="border:1px solid #ccc;">ID</th></tr>
</table>Vloeiend binnen grenzen
Door width, min-width en max-width te combineren, ontstaat een vloeiend element met absolute grenzen:
<div class="sidebar" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Sidebar: 25% wide, min 200px, max 350px</div>max-width: 100% voor responsieve afbeeldingen
Voorkom dat afbeeldingen buiten hun container komen:
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='700'><rect width='1200' height='700' fill='%234f8cff'/><circle cx='600' cy='350' r='260' fill='%23ffb84d'/></svg>" alt="landscape" />min() voor max-width zonder CSS-variabele
Gebruik min() als één regel voor een vloeiende breedte met een maximale grens:
<div class="card" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Card: width: min(400px, 100%)</div>min-content en max-content als waarden
Gebruik sleutelwoorden voor intrinsieke afmetingen als waarden:
<span class="tag" style="background:#4f8cff22;border:1px solid #4f8cff;display:inline-block;">A rather long tag label</span>Tabelkolommen met min-width
Voorkom dat tabelcellen onleesbaar smal worden:
<table style="border-collapse:collapse;width:100%;">
<tr>
<td style="border:1px solid #ccc;">Short</td>
<td>This is a much longer cell value that should be truncated with an ellipsis when the column is too narrow to fit it</td>
</tr>
</table>Bereiken van breedtes in mediaquery's
min-width en max-width worden ook in mediaquery's gebruikt om responsieve breekpunten vast te leggen:
<p style="font-size:0.85em;color:#888;">This scene declares a tablet-only breakpoint range with no properties yet — see the CSS panel.</p>Container met asymmetrische opvulling
Centreer de inhoud op zeer brede schermen en houd tegelijkertijd ruimte langs de randen:
<div class="wrapper" style="background:#4f8cff11;border:1px solid #4f8cff;">Wrapper: max-width 1440px, clamped inline padding</div>Korte controle
Welke CSS-regel zorgt ervoor dat afbeeldingen altijd binnen hun bovenliggende container passen zonder vervorming?
Samenvatting
max-width begrenst de grootte van elementen voor leesbare inhoud en gecentreerde containers. min-width voorkomt dat elementen kleiner worden dan bruikbare afmetingen. Door beide te combineren ontstaan vloeiende elementen die binnen vastgelegde grenzen kunnen meebewegen. Voeg voor responsief gedrag altijd max-width: 100%; height: auto toe aan afbeeldingen.
Leer CSS met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “Patronen met min-width en max-width” gratis?
Ja — de volledige tekst van “Patronen met min-width en max-width” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “Patronen met min-width en max-width”?
Beperk elementen met min-width en max-width tot comfortabele leesbreedtes. Je oefent met CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met CSS Academy te beginnen?
Ervaring vooraf is niet nodig. CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Patronen met min-width en max-width”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over CSS Academy?
Ja. Elke les over CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Mobile-first versus desktop-first
- Vloeiende breedtes met percentages
- Patronen met min-width en max-width
- Responsive afbeeldingen en het picture-element