Proprietà CSS relative al layout a colonne
Questo articolo spiega le proprietà CSS relative al layout a colonne.
Puoi imparare come descrivere i layout a colonne.
YouTube Video
HTML per Anteprima
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>Layout a Colonne
colonne
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}La proprietà CSS columns fornisce un modo pratico per visualizzare contenuti suddivisi in più colonne. Con una sola dichiarazione, puoi facilmente impostare la larghezza delle colonne e il numero di colonne, rendendolo adatto al design responsivo. È particolarmente efficace quando è richiesto un layout in cui il testo è visualizzato lungo verticalmente e disposto in più colonne, come nei giornali o nelle riviste.
- In questo esempio, il contenuto è suddiviso in 3 colonne con uno spazio di 20px e una linea di 2px tra le colonne. Inoltre, l'elemento
h5si estende su più colonne.
columns è una scorciatoia per le proprietà column-width e column-count.
Sintassi della proprietà columns
1columns: <column-width> <column-count>;columns segue questo formato.
<column-width>: Specifica la larghezza di ogni colonna. Puoi usareautoo qualsiasi unità di lunghezza (es.,px,em,%, ecc.) come valore.<column-count>: Specifica il numero di colonne. Espresso come valore numerico.
Proprietà column-width
1.container {
2 column-width: 250px;
3}column-width è una proprietà che specifica la larghezza minima di ogni colonna. Quando utilizzata con column-count, è possibile posizionare e regolare automaticamente le colonne. Il browser tiene conto della larghezza del contenitore e calcola automaticamente il numero richiesto di colonne.
- In questo esempio, la larghezza per colonna è di 250px e il numero ottimale di colonne è calcolato in base alla larghezza del contenitore.
column-count Proprietà
1.container {
2 column-count: 3;
3}column-count è una proprietà che determina esplicitamente in quante colonne è suddiviso l'elemento specificato. A differenza di column-width, questa proprietà fissa il numero di colonne.
- In questo esempio, il contenuto all'interno del contenitore è suddiviso in tre colonne.
column-gap Proprietà
1.container {
2 column-gap: 20px;
3}column-gap è una proprietà che specifica lo spazio (il divario) tra ogni colonna. Esiste anche una proprietà comune con CSS Grid chiamata gap, ma column-gap è utile quando si desidera personalizzare solo i margini tra le colonne.
- In questo esempio, c'è un margine di 20px tra ogni colonna. Il valore predefinito è 16px.
column-rule Proprietà
1.container {
2 column-rule: 2px solid #333;
3}column-rule è una proprietà utilizzata per disegnare linee tra le colonne. Ha una sintassi simile alla proprietà border e consente di specificare la larghezza, lo stile e il colore della linea.
- In questo esempio, è mostrata una linea nera continua con una larghezza di 2px tra le colonne.
column-rulepuò essere suddivisa nelle seguenti tre proprietà.column-rule-width: Specifica la larghezza della linea.column-rule-style: Specifica lo stile della linea. Ad esempio, ci sonosolid,dashed,dotted, ecc.column-rule-color: Specifica il colore della linea.
column-span Proprietà
1h5 {
2 column-span: all;
3}column-span è una proprietà che imposta uno specifico elemento in modo che si estenda su più colonne. È utilizzata principalmente per elementi come intestazioni o titoli. Ci sono due valori possibili:.
- none: L'elemento non si estende su più colonne e si adatta a una sola colonna. Questo è il valore predefinito.
- all: L'elemento viene visualizzato estendendosi su tutte le colonne.
- In questo esempio, l'elemento
h5viene visualizzato estendendosi su più colonne.
Proprietà column-fill
1.container {
2 column-fill: balance;
3}column-fill è una proprietà che controlla come il contenuto è distribuito tra le colonne. Normalmente, le colonne sono riempite in modo il più equo possibile, ma questa proprietà consente di specificare una disposizione diversa. Sono disponibili i seguenti valori:.
- balance: I contenuti sono disposti per riempire uniformemente le colonne. Questo è il valore predefinito.
- auto: Le colonne verranno riempite automaticamente. L'ultima colonna potrebbe diventare più lunga.
- Questa impostazione regola affinché il contenuto sia distribuito equamente.
Utilizzo con le Media Query
1.container {
2 columns: 200px 3;
3}
4
5@media (max-width: 600px) {
6 .container {
7 columns: 1;
8 }
9}La proprietà columns può essere combinata con le media query per supportare il design responsivo. È possibile modificare in modo flessibile il numero di colonne e le larghezze delle colonne in base alle diverse dimensioni dello schermo.
- In questo esempio, quando la larghezza dello schermo è 600px o meno, ci sarà 1 sola colonna. Per schermi più ampi, verrà diviso in 3 colonne con una larghezza di 200px ciascuna.
Riepilogo
La proprietà CSS columns è uno strumento potente per implementare facilmente layout che utilizzano più colonne. È particolarmente utile per il design responsivo e i layout di testo che danno priorità alla leggibilità. Combinando le proprietà correlate, puoi personalizzare in modo flessibile il numero e la larghezza delle colonne, gli spazi, le decorazioni, ecc.
Questo consente un'implementazione semplice di design più sofisticati, quindi approfittane.
ordine
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}La proprietà CSS order è utilizzata per controllare l'ordine di visualizzazione degli elementi quando si utilizzano layout Flexbox o Grid. Normalmente, gli elementi vengono resi secondo il markup HTML, ma è possibile modificare il loro ordine visivo con la proprietà order. Questa proprietà aiuta a progettare interfacce utente flessibili e a creare design responsivi.
- In questo esempio, gli elementi sono marcati in HTML come
Item 1,Item 2,Item 3, ma l'ordine di visualizzazione cambia inItem 2,Item 3,Item 1a causa della proprietà CSSorder.
Basi della proprietà order
La proprietà order viene applicata agli elementi all'interno di contenitori Flexbox o Grid. Definisci l'ordine di posizionamento impostando valori interi per ogni elemento. Per impostazione predefinita, l'attributo order di tutti gli elementi è impostato su 0. Modificando questo valore, puoi specificare l'ordine in cui vengono visualizzati gli elementi.
Sintassi di Base
1.item {
2 order: <integer>;
3}- Puoi specificare qualsiasi numero intero per il valore di
order. Possono essere utilizzati valori positivi, negativi o zero. Più piccolo è il valore, prima viene visualizzato l'elemento; più grande è il valore, più tardi viene visualizzato.
Utilizzo di Valori Positivi e Negativi
Puoi anche assegnare valori negativi alla proprietà order. Gli elementi con valori negativi vengono visualizzati prima dell'ordine predefinito.
1.item-1 {
2 order: -1;
3}
4.item-2 {
5 order: 2;
6}
7.item-3 {
8 order: 1;
9}In questo esempio, Item 1 ha il valore order: -1, quindi viene visualizzato per primo. Al contrario, Item 3 ha il valore order: 1 e Item 2 ha il valore order: 2, quindi appaiono in quell'ordine.
order nel design responsivo
Nel design responsivo, è possibile cambiare l'ordine degli elementi in base alla dimensione dello schermo. Ad esempio, nella visualizzazione per dispositivi mobili, è possibile modificare l'ordine degli elementi per mostrare prima le informazioni importanti.
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 questo esempio, nella visualizzazione normale, gli elementi vengono visualizzati nell'ordine Item 1, Item 2, Item 3, ma quando la larghezza dello schermo è inferiore a 600px, Item 2 appare per primo, poi Item 3, e infine Item 1.
Considerazioni sull'utilizzo di order
L'utilizzo della proprietà order può generare un ordine visivo diverso rispetto all'ordine nel DOM tree. Ciò può influire sugli strumenti di accessibilità, come gli screen reader. Quando l'ordine cambia, la navigazione tramite tastiera e altre tecnologie assistive potrebbero non funzionare come previsto. Pertanto, è necessario considerare attentamente l'impatto sull'esperienza utente quando si utilizza order.
Conclusione
La proprietà CSS order è uno strumento potente che ti consente di controllare facilmente l'ordine di visualizzazione degli elementi nei layout Flexbox o Grid. Utilizzando valori positivi o negativi, puoi cambiare l'ordine degli elementi in modo flessibile, il che è particolarmente utile nel design responsivo. Tuttavia, è necessario prestare attenzione all'accessibilità e alla divergenza tra l'ordine visivo e la struttura HTML. Se questi aspetti vengono considerati adeguatamente, la proprietà order può essere utile per creare layout più dinamici e flessibili.
Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.