CSS-eigenschappen gerelateerd aan kolomlay-out
Dit artikel legt de CSS-eigenschappen uit die gerelateerd zijn aan kolomlay-out.
Je kunt leren hoe je kolomlay-outs kunt beschrijven.
YouTube Video
HTML voor Voorbeeldweergave
css-columns.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-columns.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Columns</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Layout Related Properties</h2>
20 </header>
21 <article>
22 <h3>columns</h3>
23 <section>
24 <header><h4>HTML</h4></header>
25<pre>
26<section class="columns-container">
27 <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</h5>
28 <p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
29 <p>2. Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
30 <p>3. Pellentesque malesuada diam eu sem finibus scelerisque.</p>
31 <p>4. Integer eget dolor nec est dignissim fermentum ut eget nunc.</p>
32 <p>5. Morbi in nibh in lorem vestibulum sollicitudin.</p>
33</section>
34</pre>
35 <header><h4>HTML+CSS</h4></header>
36 <section class="sample-view">
37 <section class="columns-container">
38 <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</h5>
39 <p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
40 <p>2. Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
41 <p>3. Pellentesque malesuada diam eu sem finibus scelerisque.</p>
42 <p>4. Integer eget dolor nec est dignissim fermentum ut eget nunc.</p>
43 <p>5. Morbi in nibh in lorem vestibulum sollicitudin.</p>
44 </section>
45 </section>
46 </section>
47 </article>
48 <article>
49 <h3>order</h3>
50 <section style="height: 300px;">
51 <header><h4>column-width: 250px</h4></header>
52 <section class="sample-view">
53 <div class="container">
54 <div class="item item-1">Item 1</div>
55 <div class="item item-2">Item 2</div>
56 <div class="item item-3">Item 3</div>
57 </div>
58 </section>
59 </section>
60 </article>
61 </main>
62</body>
63</html>Kolomlay-out
kolommen
1.columns-container {
2 columns: 100px 3;
3 column-gap: 20px;
4 column-rule: 2px solid #333;
5}
6
7h5 {
8 column-span: all;
9}De CSS-eigenschap columns biedt een handige manier om inhoud over meerdere kolommen te verdelen. Met één enkele declaratie kun je eenvoudig de kolombreedte en het aantal kolommen instellen, wat het geschikt maakt voor responsief ontwerp. Het is vooral effectief wanneer een lay-out nodig is waar tekst verticaal lang wordt weergegeven en in meerdere kolommen wordt gerangschikt, zoals in kranten of tijdschriften.
- In dit voorbeeld wordt de inhoud verdeeld over 3 kolommen met een tussenruimte van 20px en een scheidingslijn van 2px tussen de kolommen. Daarnaast strekt het
h5-element zich uit over meerdere kolommen.
columns is een verkorte notatie voor de eigenschappen column-width en column-count.
Syntax van de columns-eigenschap
1columns: <column-width> <column-count>;columns volgt dit formaat.
<column-width>: Geeft de breedte van elke kolom op.auto,px,%en andere lengteeenheden kunnen als waarden worden gebruikt.<column-count>: Geeft het aantal kolommen aan als een numerieke waarde.
column-width-eigenschap
1.container {
2 column-width: 250px;
3}column-width is een eigenschap die de minimale breedte van elke kolom specificeert. Wanneer gebruikt met column-count, wordt automatische plaatsing en aanpassing van kolommen mogelijk. De browser houdt rekening met de breedte van de container en berekent automatisch het vereiste aantal kolommen.
- In dit voorbeeld is de breedte per kolom 250px, en het optimale aantal kolommen wordt berekend op basis van de breedte van de container.
kolom-aantal Eigenschap
1.container {
2 column-count: 3;
3}kolom-aantal is een eigenschap die expliciet instelt in hoeveel kolommen het opgegeven element is verdeeld. In tegenstelling tot kolom-breedte bepaalt dit het aantal kolommen.
- In dit voorbeeld is de inhoud binnen de container verdeeld over drie kolommen.
kolom-afstand Eigenschap
1.container {
2 column-gap: 20px;
3}kolom-afstand is een eigenschap waarmee de ruimte (afstand) tussen elke kolom wordt bepaald. Er is ook een algemene eigenschap in CSS Grid genaamd afstand, maar kolom-afstand is handig als je alleen de marges tussen kolommen wilt aanpassen.
- In dit voorbeeld is er een marge van 20px tussen elke kolom. De standaardwaarde is 16px.
kolom-regel Eigenschap
1.container {
2 column-rule: 2px solid #333;
3}kolom-regel is een eigenschap voor het tekenen van lijnen tussen kolommen. Het heeft een syntax vergelijkbaar met de rand eigenschap en stelt je in staat de breedte, stijl en kleur van de lijn op te geven.
- In dit voorbeeld wordt een doorlopende zwarte lijn met een breedte van 2px tussen de kolommen getoond.
kolom-regelkan worden onderverdeeld in de volgende drie eigenschappen.kolom-regel-breedte: Bepaalt de breedte van de lijn.kolom-regel-stijl: Bepaalt de stijl van de lijn. Bijvoorbeeld, er zijndoorlopend,stippellijn,gestippeld, enzovoort.kolom-regel-kleur: Bepaalt de kleur van de lijn.
kolom-span Eigenschap
1h5 {
2 column-span: all;
3}kolom-span is een eigenschap die ervoor zorgt dat een specifiek element over meerdere kolommen wordt uitgespreid. Het wordt voornamelijk gebruikt voor elementen zoals koppen of titels. Er zijn twee mogelijke waarden:.
- geen: Het element spreidt zich niet uit over kolommen en past binnen één kolom. Dit is de standaardwaarde.
- alles: Het element wordt weergegeven over alle kolommen.
- In dit voorbeeld wordt het
h5element weergegeven over meerdere kolommen.
column-fill Eigenschap
1.container {
2 column-fill: balance;
3}column-fill is een eigenschap die regelt hoe inhoud over kolommen wordt verdeeld. Normaal gesproken worden kolommen zo gelijkmatig mogelijk gevuld, maar met deze eigenschap kun je een andere indeling specificeren. De volgende waarden zijn beschikbaar:.
- balance: Inhoud wordt zo gerangschikt dat de kolommen gelijkmatig worden gevuld. Dit is de standaardwaarde.
- auto: Kolommen worden automatisch gevuld. De laatste kolom kan langer worden.
- Deze instelling past zich aan zodat de inhoud gelijkmatig wordt verdeeld.
Gebruik met Media Queries
1.container {
2 columns: 200px 3;
3}
4
5@media (max-width: 600px) {
6 .container {
7 columns: 1;
8 }
9}De columns-eigenschap kan worden gecombineerd met media queries om responsive design te ondersteunen. Je kunt het aantal kolommen en de breedte van de kolommen flexibel aanpassen aan verschillende schermgroottes.
- In dit voorbeeld is er één kolom als de schermbreedte 600px of minder is. Voor bredere schermen wordt het verdeeld in 3 kolommen van elk 200px breed.
Samenvatting
De CSS columns-eigenschap is een krachtig hulpmiddel om eenvoudig lay-outs met meerdere kolommen te implementeren. Het is vooral nuttig voor responsive design en tekstlay-outs die leesbaarheid prioriteren. Door gerelateerde eigenschappen te combineren kun je flexibel het aantal en de breedte van kolommen, tussenruimten, decoraties, enz. aanpassen.
Dit maakt eenvoudige implementatie van meer geavanceerde ontwerpen mogelijk, dus maak er gebruik van.
volgorde
1.container {
2 all:initial;
3 display: flex;
4}
5.item {
6 padding: 10px;
7 background-color: lightblue;
8 margin: 5px;
9}
10.item-1 {
11 order: 3;
12}
13.item-2 {
14 order: 1;
15}
16.item-3 {
17 order: 2;
18}De CSS order-eigenschap wordt gebruikt om de weergavevolgorde van elementen te regelen bij gebruik van Flexbox- of Grid-lay-outs. Normaal gesproken worden elementen gerenderd volgens de HTML-opmaak, maar je kunt hun visuele volgorde wijzigen met behulp van de order-eigenschap. Deze eigenschap helpt bij het ontwerpen van flexibele gebruikersinterfaces en het bouwen van responsive ontwerpen.
- In dit voorbeeld zijn de items in HTML gemarkeerd als
Item 1,Item 2,Item 3, maar de weergavevolgorde verandert inItem 2,Item 3,Item 1door de CSSorder-eigenschap.
Basisprincipes van de order-eigenschap
De order-eigenschap wordt toegepast op items binnen Flexbox- of Grid-containers. Je bepaalt de volgorde van plaatsing door gehele getallen aan elk item toe te wijzen. Standaard is de order van alle items ingesteld op 0. Door deze waarde te veranderen, kun je de volgorde bepalen waarin items worden weergegeven.
Basis Syntax
1.item {
2 order: <integer>;
3}- Je kunt elk geheel getal instellen als waarde voor de
order. Positieve, negatieve of nulwaarden kunnen worden gebruikt. Hoe kleiner de waarde, hoe eerder het element wordt weergegeven, en hoe groter de waarde, hoe later het wordt weergegeven.
Gebruik van Positieve en Negatieve Waarden
Je kunt ook negatieve waarden toewijzen aan de order-eigenschap. Elementen met negatieve waarden worden weergegeven vóór de standaardvolgorde.
1.item-1 {
2 order: -1;
3}
4.item-2 {
5 order: 2;
6}
7.item-3 {
8 order: 1;
9}In dit voorbeeld wordt Item 1 als eerste weergegeven omdat de order is ingesteld op -1. Daarentegen wordt Item 3 daarna weergegeven met een order van 1, gevolgd door Item 2 met een order van 2.
order in responsief ontwerp
In responsief ontwerp is het mogelijk de volgorde van elementen aan te passen op basis van schermgrootte. Bijvoorbeeld, in de mobiele weergave kun je de volgorde van elementen aanpassen om belangrijke informatie als eerste weer te geven.
1.item-1 {
2 order: 1;
3}
4.item-2 {
5 order: 2;
6}
7.item-3 {
8 order: 3;
9}
10
11/* Change the order on screens with a width of 800px or less */
12@media (max-width: 800px) {
13 .item-1 {
14 order: 3;
15 }
16 .item-2 {
17 order: 1;
18 }
19 .item-3 {
20 order: 2;
21 }
22}In dit voorbeeld worden in de normale weergave de items weergegeven in de volgorde Item 1, Item 2, Item 3. Maar wanneer de schermbreedte minder dan 600px is, verschijnt Item 2 als eerste, vervolgens Item 3, en Item 1 als laatste.
Overwegingen voor order
Het gebruik van de order-eigenschap kan resulteren in een visuele volgorde die verschilt van de volgorde in de DOM-boom. Dit kan hulpmiddelen voor toegankelijkheid, zoals schermlezers, beïnvloeden. Wanneer de volgorde verandert, kunnen toetsenbordinavigatie en andere hulpmiddelen zich anders gedragen dan verwacht. Daarom is het noodzakelijk om bij het gebruik van order goed na te denken over de impact op de gebruikerservaring.
Conclusie
De CSS-eigenschap order is een krachtig hulpmiddel waarmee je eenvoudig de weergavevolgorde van elementen in Flexbox- of Grid-indelingen kunt bepalen. Door positieve of negatieve waarden te gebruiken, kun je flexibel de volgorde van elementen aanpassen, wat vooral nuttig is in responsief ontwerp. Er moet echter aandacht worden besteed aan toegankelijkheid en aan het verschil tussen visuele volgorde en HTML-structuur. Als deze aspecten goed worden overwogen, kan de order-eigenschap nuttig zijn voor het maken van meer dynamische en flexibele lay-outs.
Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.