CSS-egenskaber relateret til kolonnelayout
Denne artikel forklarer CSS-egenskaber, der er relateret til kolonnelayout.
Du kan lære, hvordan man beskriver kolonnelayouts.
YouTube Video
HTML til forhåndsvisning
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 style="width: 100%; height: 350px;">
24 <h4>Columns Example</h4>
25 <header><h4>columns: 100px 3; column-gap: 20px; column-rule: 2px solid #333;</h4></header>
26 <section class="sample-view">
27 <section class="columns-container">
28 <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</h5>
29 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
30 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
31 <p>Pellentesque malesuada diam eu sem finibus scelerisque.</p>
32 <p>Integer eget dolor nec est dignissim fermentum ut eget nunc.</p>
33 <p>Morbi in nibh in lorem vestibulum sollicitudin.</p>
34 </section>
35 </section>
36 </section>
37 </article>
38 <article>
39 <h3>order</h3>
40 <section style="height: 300px;">
41 <header><h4>column-width: 250px</h4></header>
42 <section class="sample-view">
43 <div class="container">
44 <div class="item item-1">Item 1</div>
45 <div class="item item-2">Item 2</div>
46 <div class="item item-3">Item 3</div>
47 </div>
48 </section>
49 </section>
50 </article>
51 </main>
52</body>
53</html>Kolonnelayout
kolonner
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}CSS-egenskaben columns giver en nem måde at vise indhold delt op i flere kolonner. Med en enkelt erklæring kan du nemt angive kolonnebredden og antallet af kolonner, hvilket gør det velegnet til responsivt design. Det er særligt effektivt, når et layout kræves, hvor tekst vises langt vertikalt og arrangeres i flere kolonner, såsom i aviser eller magasiner.
- I dette eksempel opdeles indhold i 3 kolonner med et mellemrum på 20px og en linje på 2px mellem kolonnerne. Derudover strækker
h5-elementet sig over flere kolonner.
columns er en kortform for egenskaberne column-width og column-count.
Syntax for egenskaben columns
1columns: <column-width> <column-count>;columns følger dette format.
<column-width>: Angiver bredden på hver kolonne. Du kan brugeautoeller en hvilken som helst længdeenhed (f.eks.px,em,%, osv.) som værdi.<column-count>: Angiver antallet af kolonner. Angivet som en numerisk værdi.
Egenskaben column-width
1.container {
2 column-width: 250px;
3}column-width er en egenskab, der angiver den minimale bredde på hver kolonne. Når den bruges sammen med column-count, bliver automatisk placering og justering af kolonner mulig. Browseren tager beholderens bredde i betragtning og beregner automatisk det nødvendige antal kolonner.
- I dette eksempel er bredden pr. kolonne 250px, og det optimale antal kolonner beregnes baseret på beholderens bredde.
column-count Egenskab
1.container {
2 column-count: 3;
3}column-count er en egenskab, der eksplicit angiver, hvor mange kolonner det angivne element deles op i. I modsætning til column-width fastsætter denne antallet af kolonner.
- I dette eksempel er indholdet i containeren delt op i tre kolonner.
column-gap Egenskab
1.container {
2 column-gap: 20px;
3}column-gap er en egenskab, der angiver afstanden (mellemrum) mellem hver kolonne. Der findes også en generel CSS Grid-egenskab ved navn gap, men column-gap er nyttig, når du kun vil tilpasse margenerne mellem kolonner.
- I dette eksempel er der en margin på 20px mellem hver kolonne. Standardværdien er 16px.
column-rule Egenskab
1.container {
2 column-rule: 2px solid #333;
3}column-rule er en egenskab til at tegne linjer mellem kolonner. Den har en syntaks, der ligner border-egenskaben, og giver dig mulighed for at angive bredden, stilen og farven på linjen.
- I dette eksempel vises en solid sort linje med en bredde på 2px mellem kolonner.
column-rulekan opdeles i følgende tre egenskaber.column-rule-width: Angiver linjens bredde.column-rule-style: Angiver linjens stil. For eksempel findessolid,dashed,dottedosv.column-rule-color: Angiver linjens farve.
column-span Egenskab
1h5 {
2 column-span: all;
3}column-span er en egenskab, der angiver, at et specifikt element skal strække sig over flere kolonner. Den bruges hovedsageligt til elementer som overskrifter eller titler. Der er to mulige værdier:.
- none: Elementet strækker sig ikke over flere kolonner, men passer inden for én kolonne. Dette er standardværdien.
- all: Elementet vises som strækkende sig over alle kolonner.
- I dette eksempel vises
h5-elementet strækkende sig over flere kolonner.
column-fill Egenskab
1.container {
2 column-fill: balance;
3}column-fill er en egenskab, der styrer, hvordan indhold fordeles på tværs af kolonner. Normalt fyldes kolonner så jævnt som muligt, men denne egenskab giver dig mulighed for at specificere en anden fordeling. Følgende værdier er tilgængelige:.
- balance: Indhold arrangeres til at fylde kolonner jævnt. Dette er standardværdien.
- auto: Kolonner vil automatisk blive udfyldt. Den sidste kolonne kan blive længere.
- Denne indstilling justerer, så indholdet fordeles jævnt.
Brug med Medieforespørgsler
1.container {
2 columns: 200px 3;
3}
4
5@media (max-width: 600px) {
6 .container {
7 columns: 1;
8 }
9}columns-egenskaben kan kombineres med medieforespørgsler for at understøtte responsivt design. Du kan fleksibelt ændre antallet af kolonner og kolonnebredder afhængigt af forskellige skærmstørrelser.
- I dette eksempel vil der være 1 kolonne, når skærmbredden er 600px eller mindre. For bredere skærme vil det blive opdelt i 3 kolonner med en bredde på 200px hver.
Sammendrag
CSS columns-egenskaben er et kraftfuldt værktøj til nemt at implementere layouts med flere kolonner. Det er særligt nyttigt til responsivt design og tekstlayouts, der prioriterer læselighed. Ved at kombinere relaterede egenskaber kan du fleksibelt tilpasse antallet og bredden af kolonner, afstande, dekorationer osv.
Dette muliggør nem implementering af mere sofistikerede designs, så drag fordel af det.
rækkefølge
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}CSS order-egenskaben bruges til at kontrollere visningsrækkefølgen af elementer, når man bruger Flexbox eller Grid-layouts. Normalt bliver elementer gengivet i henhold til HTML-markup, men du kan ændre deres visuelle rækkefølge ved at bruge order-egenskaben. Denne egenskab hjælper med at designe fleksible brugergrænseflader og opbygge responsive designs.
- I dette eksempel er elementerne markeret i HTML som
Item 1,Item 2,Item 3, men visningsrækkefølgen ændres tilItem 2,Item 3,Item 1på grund af CSSorder-egenskaben.
Grundlæggende om order-egenskaben
order-egenskaben anvendes på elementer inden for Flexbox- eller Grid-containere. Du definerer placeringens rækkefølge ved at angive heltal for hvert element. Som standard er order for alle elementer sat til 0. Ved at ændre denne værdi kan du specificere rækkefølgen, hvori elementer vises.
Grundlæggende syntaks
1.item {
2 order: <integer>;
3}- Du kan angive et hvilket som helst heltal for
order-værdien. Positive, negative eller nulværdier kan anvendes. Jo mindre værdien er, jo tidligere vises elementet, og jo større værdien er, jo senere vises det.
Brug af positive og negative værdier
Du kan også tildele negative værdier til order-egenskaben. Elementer med negative værdier vises før standardrækkefølgen.
1.item-1 {
2 order: -1;
3}
4.item-2 {
5 order: 2;
6}
7.item-3 {
8 order: 1;
9}I dette eksempel er Item 1 sat til order: -1, så det vises først. I modsætning hertil er Item 3 sat til order: 1, og Item 2 er sat til order: 2, så de vises i den rækkefølge.
order i responsivt design
I responsivt design er det muligt at ændre rækkefølgen af elementer afhængigt af skærmens størrelse. For eksempel kan du i mobilvisning ændre rækkefølgen af elementer for at vise vigtig information først.
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}I dette eksempel vises elementerne i den normale visning i rækkefølgen Item 1, Item 2, Item 3, men når skærmbredden er mindre end 600px, vises Item 2 først, derefter Item 3, og til sidst Item 1.
Overvejelser om order
Brugen af order-egenskaben kan resultere i en visuel rækkefølge, der afviger fra rækkefølgen i DOM-træet. Dette kan påvirke tilgængelighedsværktøjer, såsom skærmlæsere. Når rækkefølgen ændres, kan tastaturnavigation og andre hjælpemidler muligvis ikke fungere som forventet. Derfor er det nødvendigt nøje at overveje virkningen på brugeroplevelsen, når man bruger order.
Konklusion
CSS-order-egenskaben er et kraftfuldt værktøj, der gør det let at kontrollere visningsrækkefølgen af elementer i Flexbox- eller Grid-layouts. Ved at bruge positive eller negative værdier kan du fleksibelt ændre rækkefølgen af elementer, hvilket er særligt nyttigt i responsivt design. Dog skal der tages hensyn til tilgængelighed og forskellen mellem den visuelle rækkefølge og HTML-strukturen. Hvis disse overvejelser håndteres korrekt, kan order-egenskaben være nyttig til at skabe mere dynamiske og fleksible layouts.
Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.