CSS-egenskaper relatert til kolonnelayout
Denne artikkelen forklarer CSS-egenskapene relatert til kolonnelayout.
Du kan lære hvordan man beskriver kolonnelayout.
YouTube Video
HTML for 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-egenskapen columns gir en praktisk måte å vise innhold delt inn i flere kolonner på. Med en enkelt erklæring kan du enkelt angi kolonnebredden og antall kolonner, noe som gjør det egnet for responsiv design. Det er spesielt effektivt når du trenger en layout der tekst vises langt vertikalt og arrangert i flere kolonner, som i aviser eller magasiner.
- I dette eksemplet er innholdet delt inn i 3 kolonner med et 20px mellomrom og en 2px linje mellom kolonnene. I tillegg strekker
h5-elementet seg over flere kolonner.
columns er en snarvei for egenskapene column-width og column-count.
Syntaks for columns-egenskapen
1columns: <column-width> <column-count>;columns følger dette formatet.
<column-width>: Angir bredden på hver kolonne. Du kan brukeautoeller en hvilken som helst lengdeenhet (f.eks.px,em,%, osv.) som verdi.<column-count>: Angir antall kolonner. Uttrykt som en numerisk verdi.
column-width-egenskap
1.container {
2 column-width: 250px;
3}column-width er en egenskap som angir minimumsbredden på hver kolonne. Når den brukes med column-count, blir automatisk plassering og justering av kolonner mulig. Nettleseren tar bredden på beholderen i betraktning og beregner automatisk det nødvendige antallet kolonner.
- I dette eksemplet er bredden per kolonne 250px, og det optimale antallet kolonner beregnes basert på beholderens bredde.
column-count Egenskap
1.container {
2 column-count: 3;
3}column-count er en egenskap som eksplisitt angir hvor mange kolonner det angitte elementet deles inn i. I motsetning til column-width fastsetter dette antall kolonner.
- I dette eksemplet er innholdet i beholderen delt inn i tre kolonner.
column-gap Egenskap
1.container {
2 column-gap: 20px;
3}column-gap er en egenskap som angir plassen (gapet) mellom hver kolonne. Det finnes også en generell egenskap i CSS Grid kalt gap, men column-gap er nyttig når du bare ønsker å tilpasse margene mellom kolonner.
- I dette eksemplet er det en margin på 20px mellom hver kolonne. Standardverdien er 16px.
column-rule Egenskap
1.container {
2 column-rule: 2px solid #333;
3}column-rule er en egenskap for å tegne linjer mellom kolonner. Den har en syntaks som ligner på border-egenskapen og lar deg spesifisere bredden, stilen og fargen på linjen.
- I dette eksemplet vises en solid svart linje med en bredde på 2px mellom kolonnene.
column-rulekan deles opp i følgende tre egenskaper.column-rule-width: Angir bredden på linjen.column-rule-style: Angir stilen på linjen. For eksempel finnes detsolid,dashed,dottedosv.column-rule-color: Angir fargen på linjen.
column-span Egenskap
1h5 {
2 column-span: all;
3}column-span er en egenskap som setter et spesifikt element til å spenne over flere kolonner. Den brukes hovedsakelig for elementer som overskrifter eller titler. Det er to mulige verdier:.
- none: Elementet spenner ikke over kolonner og passer innenfor én kolonne. Dette er standardverdien.
- all: Elementet vises over alle kolonnene.
- I dette eksemplet vises
h5-elementet over flere kolonner.
column-fill-egenskap
1.container {
2 column-fill: balance;
3}column-fill er en egenskap som styrer hvordan innhold fordeles mellom kolonner. Vanligvis fylles kolonner så jevnt som mulig, men denne egenskapen lar deg spesifisere en annen fordeling. Følgende verdier er tilgjengelige:.
- balance: Innhold arrangeres slik at kolonner fylles jevnt. Dette er standardverdien.
- auto: Kolonner fylles automatisk. Den siste kolonnen kan bli lengre.
- Denne innstillingen justerer slik at innholdet fordeles jevnt.
Bruk med mediaforespørsler
1.container {
2 columns: 200px 3;
3}
4
5@media (max-width: 600px) {
6 .container {
7 columns: 1;
8 }
9}columns-egenskapen kan kombineres med mediaforespørsler for å støtte responsivt design. Du kan fleksibelt endre antall kolonner og kolonnebredder avhengig av forskjellige skjermstørrelser.
- I dette eksemplet vil det være 1 kolonne når skjermbredden er 600px eller mindre. For bredere skjermer deles det opp i 3 kolonner med en bredde på 200px hver.
Sammendrag
CSS-columns-egenskapen er et kraftig verktøy for enkelt å implementere oppsett ved bruk av flere kolonner. Den er spesielt nyttig for responsivt design og tekstoppsett som prioriterer lesbarhet. Ved å kombinere relaterte egenskaper kan du fleksibelt tilpasse antall og bredde på kolonner, avstander, dekorasjoner osv.
Dette muliggjør enkel implementering av mer sofistikerte design, så vær gjerne kreativ med det.
rekkefø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-egenskapen brukes til å kontrollere rekkefølgen på elementer når man bruker Flexbox- eller Grid-oppsett. Vanligvis vises elementer i henhold til HTML-koden, men du kan endre deres visuelle rekkefølge ved å bruke order-egenskapen. Denne egenskapen hjelper med å designe fleksible brukergrensesnitt og bygge responsive design.
- I dette eksemplet er elementene skrevet i HTML som
Item 1,Item 2,Item 3, men visningsrekkefølgen endres tilItem 2,Item 3,Item 1på grunn av CSS-order-egenskapen.
Grunnleggende om order-egenskapen
order-egenskapen brukes på elementer innenfor Flexbox- eller Grid-beholdere. Du definerer rekkefølgen for plassering ved å sette heltallsverdier for hvert element. Som standard er order for alle elementer satt til 0. Ved å endre denne verdien kan du spesifisere rekkefølgen elementene vises i.
Grunnleggende Syntax
1.item {
2 order: <integer>;
3}- Du kan angi et hvilket som helst heltall for verdien til
order. Positive, negative eller nullverdier kan brukes. Jo mindre verdien er, desto tidligere vises elementet, og jo større verdien er, desto senere vises det.
Bruke positive og negative verdier
Du kan også tilordne negative verdier til order-egenskapen. Elementer med negative verdier vises før standardrekkefølgen.
1.item-1 {
2 order: -1;
3}
4.item-2 {
5 order: 2;
6}
7.item-3 {
8 order: 1;
9}I dette eksempelet er Item 1 satt til order: -1, så det vises først. I kontrast er Item 3 satt til order: 1, og Item 2 er satt til order: 2, så de vises i den rekkefølgen.
order i responsivt design
I responsivt design er det mulig å endre rekkefølgen på elementer i henhold til skjermstørrelse. For eksempel kan du i mobilvisning endre rekkefølgen på elementer for å vise viktig informasjon 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 eksempelet vises elementene i normalvisning i rekkefølgen Item 1, Item 2, Item 3, men når skjermbredden er under 600px, vises Item 2 først, deretter Item 3, og Item 1 sist.
Forhold å vurdere for order
Bruk av order-egenskapen kan føre til en visuell rekkefølge som skiller seg fra rekkefølgen i DOM-treet. Dette kan påvirke tilgjengelighetsverktøy som skjermlesere. Når rekkefølgen endres, kan tastaturnavigering og andre hjelpemiddelteknologier fungere annerledes enn forventet. Derfor er det nødvendig å nøye vurdere innvirkningen på brukererfaringen når man bruker order.
Konklusjon
CSS-egenskapen order er et kraftig verktøy som lar deg enkelt kontrollere rekkefølgen på visningen av elementer i Flexbox- eller Grid-oppsett. Ved å bruke positive eller negative verdier kan du fleksibelt endre rekkefølgen på elementer, noe som er spesielt nyttig i responsivt design. Det må imidlertid tas hensyn til tilgjengelighet og forskjellen mellom visuell rekkefølge og HTML-struktur. Hvis disse vurderes nøye, kan order-egenskapen være nyttig for å lage mer dynamiske og fleksible oppsett.
Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.