CSS-egenskaper som är relaterade till kolumnlayout
Den här artikeln förklarar CSS-egenskaper som är relaterade till kolumnlayout.
Du kan lära dig hur man beskriver kolumnlayouter.
YouTube Video
HTML för förhandsgranskning
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>Kolumnlayout
kolumner
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 erbjuder ett enkelt sätt att visa innehåll uppdelat i flera kolumner. Med en enda deklaration kan du enkelt ställa in kolumnbredd och antal kolumner, vilket gör det lämpligt för responsiv design. Det är särskilt effektivt när en layout krävs där text visas långt vertikalt och arrangeras i flera kolumner, som i tidningar eller magasin.
- I det här exemplet delas innehållet in i 3 kolumner med ett 20px mellanrum och en 2px linje mellan kolumnerna. Dessutom sträcker sig
h5-elementet över flera kolumner.
columns är en förkortning för egenskaperna column-width och column-count.
Syntax för egenskapen columns
1columns: <column-width> <column-count>;columns följer detta format.
<column-width>: Anger bredden på varje kolumn. Du kan användaautoeller vilken längdenhet som helst (t.ex.px,em,%, etc.) som värde.<column-count>: Anger antalet kolumner. Uttryckt som ett numeriskt värde.
Egenskapen column-width
1.container {
2 column-width: 250px;
3}column-width är en egenskap som anger den minsta bredden för varje kolumn. När den används tillsammans med column-count blir automatisk placering och justering av kolumner möjlig. Webbläsaren tar hänsyn till behållarens bredd och beräknar automatiskt det erforderliga antalet kolumner.
- I det här exemplet är bredden per kolumn 250px, och det optimala antalet kolumner beräknas baserat på behållarens bredd.
column-count Egenskap
1.container {
2 column-count: 3;
3}column-count är en egenskap som uttryckligen anger hur många kolumner det angivna elementet delas in i. Till skillnad från column-width fastställer detta antalet kolumner.
- I det här exemplet delas innehållet i containern upp i tre kolumner.
column-gap Egenskap
1.container {
2 column-gap: 20px;
3}column-gap är en egenskap som anger utrymmet (gapet) mellan varje kolumn. Det finns också en gemensam egenskap med CSS Grid kallad gap, men column-gap är användbar när du vill anpassa endast marginalerna mellan kolumner.
- I det här exemplet finns det en 20px marginal mellan varje kolumn. Standardvärdet är 16px.
column-rule Egenskap
1.container {
2 column-rule: 2px solid #333;
3}column-rule är en egenskap för att rita linjer mellan kolumner. Den har en syntax liknande border-egenskapen och låter dig ange linjens bredd, stil och färg.
- I det här exemplet visas en solid svart linje med en bredd på 2px mellan kolumnerna.
column-rulekan delas upp i följande tre egenskaper.column-rule-width: Anger linjens bredd.column-rule-style: Anger linjens stil. Till exempel finnssolid,dashed,dottedmed flera.column-rule-color: Anger linjens färg.
column-span Egenskap
1h5 {
2 column-span: all;
3}column-span är en egenskap som ställer in ett specifikt element så att det sträcker sig över flera kolumner. Den används främst för element som rubriker eller titlar. Det finns två möjliga värden:.
- none: Elementet sträcker sig inte över kolumner och passar inom en kolumn. Det här är standardvärdet.
- all: Elementet visas över alla kolumner.
- I det här exemplet visas
h5-elementet så att det sträcker sig över flera kolumner.
column-fill Egenskap
1.container {
2 column-fill: balance;
3}column-fill är en egenskap som kontrollerar hur innehåll fördelas över kolumner. Normalt fylls kolumnerna så jämnt som möjligt, men denna egenskap låter dig ange en annan fördelning. Följande värden är tillgängliga:.
- balance: Innehållet arrangeras för att fylla kolumnerna jämnt. Det här är standardvärdet.
- auto: Kolumner fylls automatiskt. Den sista kolumnen kan bli längre.
- Denna inställning justerar så att innehållet fördelas jämnt.
Användning med mediaval
1.container {
2 columns: 200px 3;
3}
4
5@media (max-width: 600px) {
6 .container {
7 columns: 1;
8 }
9}columns-egenskapen kan kombineras med mediaval för att stödja responsiv design. Du kan flexibelt ändra antalet kolumner och kolumnbredder beroende på olika skärmstorlekar.
- I detta exempel kommer det att finnas 1 kolumn när skärmbredden är 600px eller mindre. För bredare skärmar kommer det att delas upp i 3 kolumner med en bredd på 200px vardera.
Sammanfattning
CSS-egenskapen columns är ett kraftfullt verktyg för att enkelt implementera layouter med flera kolumner. Det är särskilt användbart för responsiv design och textlayouter som prioriterar läsbarhet. Genom att kombinera relaterade egenskaper kan du flexibelt anpassa antalet och bredden på kolumner, mellanrum, dekorationer etc.
Detta möjliggör enkel implementering av mer sofistikerade designer, så dra nytta av det.
ordning
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-egenskapen order används för att kontrollera visningsordningen för element när man använder Flexbox eller Grid-layouter. Normalt återges element enligt HTML-strukturen, men du kan ändra deras visuella ordning med hjälp av order-egenskapen. Denna egenskap hjälper till att designa flexibla användargränssnitt och skapa responsiva designer.
- I detta exempel är elementen märkta i HTML som
Item 1,Item 2,Item 3, men visningsordningen ändras tillItem 2,Item 3,Item 1på grund av CSS-egenskapenorder.
Grunderna i order-egenskapen
order-egenskapen tillämpas på objekt inom Flexbox- eller Grid-kontainrar. Du definierar placeringen genom att ange heltalsvärden för varje objekt. Som standard är order för alla objekt inställd på 0. Genom att ändra detta värde kan du ange i vilken ordning objekten visas.
Grundläggande syntax
1.item {
2 order: <integer>;
3}- Du kan ange vilket heltal som helst för
order-värdet. Positiva, negativa eller nollvärden kan användas. Ju mindre värde, desto tidigare visas elementet, och ju större värde, desto senare visas det.
Att använda positiva och negativa värden
Du kan också tilldela negativa värden till order-egenskapen. Element med negativa värden visas före den förvalda ordningen.
1.item-1 {
2 order: -1;
3}
4.item-2 {
5 order: 2;
6}
7.item-3 {
8 order: 1;
9}I detta exempel är Item 1 inställt på order: -1, så det visas först. Däremot är Item 3 inställt på order: 1 och Item 2 på order: 2, så de visas i den ordningen.
order i responsiv design
I responsiv design är det möjligt att ändra elementens ordning beroende på skärmstorlek. Till exempel, i mobilvy kan du ändra elementens ordning för att visa viktig 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 detta exempel visas objekten i normalvy i ordningen Item 1, Item 2, Item 3, men när skärmbredden är under 600px visas Item 2 först, därefter Item 3 och till sist Item 1.
Överväganden för order
Att använda order-egenskapen kan resultera i en visuell ordning som skiljer sig från ordningen i DOM-trädet. Detta kan påverka hjälpmedel, såsom skärmläsare. När ordningen ändras kan tangentbordsnavigering och annan stödteknik fungera oväntat. Därför är det nödvändigt att noggrant överväga påverkan på användarupplevelsen när du använder order.
Slutsats
CSS-egenskapen order är ett kraftfullt verktyg som låter dig enkelt kontrollera visningsordningen för element i Flexbox- eller Grid-layouts. Genom att använda positiva eller negativa värden kan du flexibelt ändra elementens ordning, vilket är särskilt användbart i responsiv design. Dock måste man ta hänsyn till tillgänglighet och skillnaden mellan visuell ordning och HTML-struktur. Om dessa aspekter övervägs noggrant kan order-egenskapen vara användbar för att skapa mer dynamiska och flexibla layouter.
Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.