Właściwości CSS związane z układem kolumn
Ten artykuł wyjaśnia właściwości CSS związane z układem kolumn.
Możesz nauczyć się, jak opisywać układy kolumn.
YouTube Video
HTML do podglądu
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>Układ kolumn
kolumny
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}Właściwość columns w CSS umożliwia wygodne wyświetlanie treści podzielonej na wiele kolumn. Za pomocą jednej deklaracji możesz łatwo ustawić szerokość kolumn i ich liczbę, co czyni ją odpowiednią dla projektów responsywnych. Jest to szczególnie skuteczne, gdy wymagany jest układ, w którym tekst jest wyświetlany w długich pionowych blokach i zorganizowany w wielu kolumnach, na przykład w gazetach lub czasopismach.
- W tym przykładzie treść jest podzielona na 3 kolumny z odstępem 20px i linią o grubości 2px między kolumnami. Dodatkowo element
h5rozciąga się na wiele kolumn.
Właściwość columns jest skrótem dla właściwości column-width oraz column-count.
Składnia właściwości columns
1columns: <column-width> <column-count>;Właściwość columns ma następujący format.
<column-width>: Określa szerokość każdej kolumny. Możesz użyć wartościautolub dowolnej jednostki długości (np.px,em,%, itd.).<column-count>: Określa liczbę kolumn. Wyrażane jako wartość liczbowa.
Właściwość column-width
1.container {
2 column-width: 250px;
3}Właściwość column-width określa minimalną szerokość każdej kolumny. W połączeniu z column-count możliwe jest automatyczne rozmieszczanie i dopasowywanie kolumn. Przeglądarka uwzględnia szerokość kontenera i automatycznie oblicza wymaganą liczbę kolumn.
- W tym przykładzie szerokość jednej kolumny wynosi 250px, a optymalna liczba kolumn jest obliczana na podstawie szerokości kontenera.
column-count Właściwość
1.container {
2 column-count: 3;
3}column-count to właściwość, która wyraźnie określa, na ile kolumn jest podzielony dany element. W przeciwieństwie do column-width, ta właściwość ustala liczbę kolumn.
- W tym przykładzie, treść w kontenerze jest podzielona na trzy kolumny.
column-gap Właściwość
1.container {
2 column-gap: 20px;
3}column-gap to właściwość określająca odstęp (przerwę) między każdą kolumną. Istnieje także wspólna właściwość z CSS Grid o nazwie gap, ale column-gap jest przydatne, gdy chcesz dostosować tylko marginesy między kolumnami.
- W tym przykładzie, między każdą kolumną znajduje się margines o szerokości 20px. Domyślna wartość to 16px.
column-rule Właściwość
1.container {
2 column-rule: 2px solid #333;
3}column-rule to właściwość służąca do rysowania linii między kolumnami. Ma składnię podobną do właściwości border i pozwala określić szerokość, styl oraz kolor linii.
- W tym przykładzie między kolumnami widać ciągłą czarną linię o szerokości 2px.
column-rulemożna podzielić na następujące trzy właściwości.column-rule-width: Określa szerokość linii.column-rule-style: Określa styl linii. Na przykład:solid,dashed,dotted, itd.column-rule-color: Określa kolor linii.
column-span Właściwość
1h5 {
2 column-span: all;
3}column-span to właściwość, która ustawia dany element tak, aby rozciągał się na wiele kolumn. Jest głównie używana w przypadku elementów takich jak nagłówki lub tytuły. Istnieją dwie możliwe wartości:.
- none: Element nie rozciąga się na kolumny i mieści się w jednej kolumnie. To jest domyślna wartość.
- all: Element jest wyświetlany, rozciągając się na wszystkie kolumny.
- W tym przykładzie element
h5jest wyświetlany, rozciągając się na wiele kolumn.
column-fill Właściwość
1.container {
2 column-fill: balance;
3}column-fill to właściwość, która kontroluje, jak treść jest rozmieszczana między kolumnami. Zazwyczaj kolumny są wypełniane tak równomiernie, jak to możliwe, ale ta właściwość pozwala określić inną aranżację. Dostępne są następujące wartości:.
- balance: Treści są rozmieszczane w celu równomiernego wypełnienia kolumn. To jest domyślna wartość.
- auto: Kolumny będą automatycznie wypełniane. Ostatnia kolumna może być dłuższa.
- To ustawienie dostosowuje się, aby treść była równomiernie rozłożona.
Użycie z zapytaniami medialnymi
1.container {
2 columns: 200px 3;
3}
4
5@media (max-width: 600px) {
6 .container {
7 columns: 1;
8 }
9}Właściwość columns można łączyć z zapytaniami medialnymi, aby wspierać projektowanie responsywne. Możesz elastycznie zmieniać liczbę kolumn i szerokości kolumn w zależności od różnych rozmiarów ekranu.
- W tym przykładzie, gdy szerokość ekranu wynosi 600px lub mniej, będzie jedna kolumna. Dla szerszych ekranów zostanie podzielony na 3 kolumny, z których każda ma szerokość 200px.
Podsumowanie
Właściwość CSS columns to potężne narzędzie do łatwego wdrażania układów z wieloma kolumnami. Jest szczególnie przydatna do projektowania responsywnego i układów tekstu, które stawiają na czytelność. Łącząc powiązane właściwości, można elastycznie dostosować liczbę i szerokość kolumn, odstępy, dekoracje itd.
Umożliwia to łatwą implementację bardziej zaawansowanych projektów, więc warto z tego skorzystać.
kolejność
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}Właściwość CSS order służy do kontrolowania kolejności wyświetlania elementów podczas korzystania z układów Flexbox lub Grid. Zazwyczaj elementy renderowane są zgodnie z oznaczeniem w HTML, ale można zmienić ich wizualną kolejność, używając właściwości order. Ta właściwość pomaga w projektowaniu elastycznych interfejsów użytkownika i budowaniu responsywnych projektów.
- W tym przykładzie elementy w HTML są oznaczone jako
Item 1,Item 2,Item 3, ale kolejność wyświetlania zmienia się naItem 2,Item 3,Item 1dzięki właściwości CSSorder.
Podstawy właściwości order
Właściwość order jest stosowana do elementów w kontenerach Flexbox lub Grid. Określasz kolejność rozmieszczenia, ustawiając wartości całkowite dla każdego elementu. Domyślnie wartość order dla wszystkich elementów jest ustawiona na 0. Zmieniając tę wartość, możesz określić kolejność wyświetlania elementów.
Podstawowa składnia
1.item {
2 order: <integer>;
3}- Możesz ustawić dowolną wartość całkowitą dla właściwości
order. Można używać wartości dodatnich, ujemnych lub zerowych. Im mniejsza wartość, tym wcześniej element jest wyświetlany; im większa, tym później.
Korzystanie z wartości dodatnich i ujemnych
Możesz również przypisać wartości ujemne do właściwości order. Elementy z wartościami ujemnymi są wyświetlane przed domyślną kolejnością.
1.item-1 {
2 order: -1;
3}
4.item-2 {
5 order: 2;
6}
7.item-3 {
8 order: 1;
9}W tym przykładzie Item 1 ma ustawioną wartość order: -1, więc pojawia się jako pierwszy. Natomiast Item 3 ma wartość order: 1, a Item 2 ma wartość order: 2, więc są wyświetlane w tej kolejności.
order w projektowaniu responsywnym
W projektowaniu responsywnym możliwe jest zmienianie kolejności elementów w zależności od rozmiaru ekranu. Na przykład w widoku mobilnym możesz zmienić kolejność elementów, aby najpierw wyświetlać ważne informacje.
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}W tym przykładzie, w normalnym widoku elementy są wyświetlane w kolejności Item 1, Item 2, Item 3, ale gdy szerokość ekranu jest mniejsza niż 600px, Item 2 pojawia się jako pierwszy, Item 3 jako drugi, a Item 1 jako ostatni.
Uwagi dotyczące order
Użycie właściwości order może skutkować wizualną kolejnością różniącą się od kolejności w drzewie DOM. Może to wpłynąć na narzędzia dostępności, takie jak czytniki ekranu. W przypadku zmiany kolejności, nawigacja klawiaturą i inne technologie wspomagające mogą nie działać zgodnie z oczekiwaniami. Dlatego konieczne jest dokładne rozważenie wpływu na doświadczenie użytkownika podczas korzystania z order.
Wnioski
Właściwość CSS order jest potężnym narzędziem, które pozwala łatwo kontrolować kolejność wyświetlania elementów w układach Flexbox lub Grid. Stosując wartości dodatnie lub ujemne, możesz elastycznie zmieniać kolejność elementów, co jest szczególnie przydatne w projektowaniu responsywnym. Jednak należy zwrócić uwagę na dostępność i różnice między wizualną kolejnością a strukturą HTML. Jeśli te aspekty są odpowiednio uwzględnione, właściwość order może być pomocna w tworzeniu bardziej dynamicznych i elastycznych układów.
Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.