CSS-Eigenschaften im Zusammenhang mit der Spaltenlayout
Dieser Artikel erklärt die CSS-Eigenschaften im Zusammenhang mit dem Spaltenlayout.
Sie können lernen, Spaltenlayouts zu beschreiben.
YouTube Video
HTML zur Vorschau
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>Spaltenlayout
Spalten
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}Die CSS-Eigenschaft columns bietet eine einfache Möglichkeit, Inhalte in mehrere Spalten aufzuteilen. Mit einer einzigen Deklaration können Sie die Spaltenbreite und die Anzahl der Spalten einfach festlegen, was es für responsives Design geeignet macht. Es ist besonders effektiv, wenn ein Layout erforderlich ist, bei dem Text lange vertikal angezeigt und in mehreren Spalten angeordnet wird, wie in Zeitungen oder Magazinen.
- In diesem Beispiel wird der Inhalt in 3 Spalten mit einer Lücke von 20px und einer Linie von 2px zwischen den Spalten unterteilt. Außerdem erstreckt sich das
h5-Element über mehrere Spalten.
columns ist eine Kurzform für die Eigenschaften column-width und column-count.
Syntax der Eigenschaft columns
1columns: <column-width> <column-count>;columns folgt diesem Format.
<column-width>: Legt die Breite jeder Spalte fest. Sie könnenautooder eine beliebige Längeneinheit (z. B.px,em,%usw.) als Wert verwenden.<column-count>: Gibt die Anzahl der Spalten an. Als numerischer Wert angegeben.
Eigenschaft column-width
1.container {
2 column-width: 250px;
3}column-width ist eine Eigenschaft, die die Mindestbreite jeder Spalte angibt. Wenn sie mit column-count verwendet wird, sind automatische Platzierung und Anpassung der Spalten möglich. Der Browser berücksichtigt die Breite des Containers und berechnet automatisch die erforderliche Anzahl an Spalten.
- In diesem Beispiel beträgt die Breite pro Spalte 250px, und die optimale Anzahl der Spalten wird basierend auf der Breite des Containers berechnet.
column-count Eigenschaft
1.container {
2 column-count: 3;
3}column-count ist eine Eigenschaft, die explizit festlegt, in wie viele Spalten das angegebene Element unterteilt wird. Im Gegensatz zu column-width wird hier die Anzahl der Spalten festgelegt.
- In diesem Beispiel wird der Inhalt innerhalb des Containers in drei Spalten aufgeteilt.
column-gap Eigenschaft
1.container {
2 column-gap: 20px;
3}column-gap ist eine Eigenschaft, die den Abstand (Zwischenraum) zwischen den Spalten festlegt. Es gibt auch eine allgemeine Eigenschaft mit CSS Grid namens gap, aber column-gap ist nützlich, wenn man nur die Abstände zwischen den Spalten anpassen möchte.
- In diesem Beispiel beträgt der Abstand zwischen den Spalten 20px. Der Standardwert beträgt 16px.
column-rule Eigenschaft
1.container {
2 column-rule: 2px solid #333;
3}column-rule ist eine Eigenschaft, die Linien zwischen den Spalten zeichnet. Sie hat eine ähnliche Syntax wie die border Eigenschaft und ermöglicht es, die Breite, den Stil und die Farbe der Linie festzulegen.
- In diesem Beispiel wird eine schwarze durchgehende Linie mit einer Breite von 2px zwischen den Spalten angezeigt.
column-rulekann in die folgenden drei Eigenschaften unterteilt werden.column-rule-width: Legt die Breite der Linie fest.column-rule-style: Legt den Stil der Linie fest. Zum Beispiel gibt essolid,dashed,dottedusw.column-rule-color: Legt die Farbe der Linie fest.
column-span Eigenschaft
1h5 {
2 column-span: all;
3}column-span ist eine Eigenschaft, die ein bestimmtes Element über mehrere Spalten hinweg anzeigt. Sie wird hauptsächlich für Elemente wie Überschriften oder Titel verwendet. Es gibt zwei mögliche Werte:.
- none: Das Element erstreckt sich nicht über mehrere Spalten und passt in eine einzelne Spalte. Dies ist der Standardwert.
- all: Das Element wird über alle Spalten hinweg angezeigt.
- In diesem Beispiel wird das
h5Element über mehrere Spalten hinweg angezeigt.
column-fill-Eigenschaft
1.container {
2 column-fill: balance;
3}column-fill ist eine Eigenschaft, die steuert, wie Inhalte über Spalten verteilt werden. Normalerweise werden Spalten so gleichmäßig wie möglich gefüllt, aber diese Eigenschaft ermöglicht es, eine andere Anordnung festzulegen. Die folgenden Werte stehen zur Verfügung:.
- balance: Inhalte werden so angeordnet, dass die Spalten gleichmäßig gefüllt werden. Dies ist der Standardwert.
- auto: Spalten werden automatisch gefüllt. Die letzte Spalte kann länger werden.
- Diese Einstellung sorgt dafür, dass Inhalte gleichmäßig verteilt werden.
Verwendung mit Media Queries
1.container {
2 columns: 200px 3;
3}
4
5@media (max-width: 600px) {
6 .container {
7 columns: 1;
8 }
9}Die columns-Eigenschaft kann mit Media Queries kombiniert werden, um ein responsives Design zu unterstützen. Sie können die Anzahl der Spalten und die Breiten der Spalten flexibel je nach Bildschirmgröße ändern.
- In diesem Beispiel gibt es bei einer Bildschirmbreite von 600px oder weniger nur eine Spalte. Für breitere Bildschirme wird es in 3 Spalten mit jeweils 200px Breite aufgeteilt.
Zusammenfassung
Die CSS-columns-Eigenschaft ist ein leistungsstarkes Werkzeug, um Layouts mit mehreren Spalten einfach zu implementieren. Sie ist besonders nützlich für responsives Design und Textlayouts, die Lesbarkeit priorisieren. Durch die Kombination verwandter Eigenschaften können Sie die Anzahl und Breite der Spalten, Abstände, Dekorationen usw. flexibel anpassen.
Damit können Sie anspruchsvollere Designs einfach umsetzen. Nutzen Sie diese Möglichkeit.
order
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}Die CSS-order-Eigenschaft wird verwendet, um die Anzeigereihenfolge von Elementen bei der Verwendung von Flexbox- oder Grid-Layouts zu steuern. Normalerweise werden Elemente entsprechend dem HTML-Markup gerendert, aber durch die Verwendung der order-Eigenschaft können Sie ihre visuelle Reihenfolge ändern. Diese Eigenschaft hilft beim Entwerfen von flexiblen Benutzeroberflächen und beim Erstellen von responsiven Designs.
- In diesem Beispiel sind die Elemente in HTML als
Item 1,Item 2,Item 3markiert, aber die Anzeigereihenfolge ändert sich zuItem 2,Item 3,Item 1aufgrund der CSS-order-Eigenschaft.
Grundlagen der order-Eigenschaft
Die order-Eigenschaft wird auf Elemente innerhalb von Flexbox- oder Grid-Containern angewendet. Sie definieren die Platzierungsreihenfolge, indem Sie ganzzahlige Werte für jedes Element festlegen. Standardmäßig ist die order aller Elemente auf 0 gesetzt. Indem Sie diesen Wert ändern, können Sie die Reihenfolge festlegen, in der Elemente angezeigt werden.
Grundlegende Syntax
1.item {
2 order: <integer>;
3}- Sie können jeden ganzzahligen Wert für die
order-Eigenschaft angeben. Positive, negative oder Null-Werte können verwendet werden. Je kleiner der Wert, desto früher wird das Element angezeigt, und je größer der Wert, desto später wird es angezeigt.
Verwendung von positiven und negativen Werten
Sie können auch negative Werte für die order-Eigenschaft zuweisen. Elemente mit negativen Werten werden vor der Standardreihenfolge angezeigt.
1.item-1 {
2 order: -1;
3}
4.item-2 {
5 order: 2;
6}
7.item-3 {
8 order: 1;
9}In diesem Beispiel ist Item 1 auf order: -1 gesetzt und erscheint daher zuerst. Im Gegensatz dazu ist Item 3 auf order: 1 und Item 2 auf order: 2 gesetzt, sodass sie in dieser Reihenfolge erscheinen.
order im Responsive Design
Im Responsive Design ist es möglich, die Reihenfolge der Elemente an die Bildschirmgröße anzupassen. Zum Beispiel können Sie in der mobilen Ansicht die Reihenfolge der Elemente ändern, um wichtige Informationen zuerst anzuzeigen.
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 diesem Beispiel werden im normalen Modus die Elemente in der Reihenfolge Item 1, Item 2, Item 3 angezeigt. Wenn die Bildschirmbreite jedoch unter 600px liegt, erscheint Item 2 zuerst, Item 3 danach und Item 1 zuletzt.
Überlegungen zur Verwendung von order
Die Verwendung der order-Eigenschaft kann zu einer visuellen Reihenfolge führen, die sich von der Reihenfolge im DOM-Baum unterscheidet. Dies kann sich auf Barrierefreiheitstools wie Bildschirmleseprogramme auswirken. Wenn sich die Reihenfolge ändert, funktionieren die Tastaturnavigation und andere unterstützende Technologien möglicherweise nicht wie erwartet. Daher ist es notwendig, die Auswirkungen auf die Benutzererfahrung bei der Verwendung von order sorgfältig zu berücksichtigen.
Fazit
Die CSS-Eigenschaft order ist ein leistungsstarkes Werkzeug, mit dem Sie die Anzeigereihenfolge von Elementen in Flexbox- oder Grid-Layouts einfach steuern können. Durch die Verwendung von positiven oder negativen Werten können Sie die Reihenfolge der Elemente flexibel ändern, was besonders im Responsive Design nützlich ist. Allerdings muss auf Barrierefreiheit und die Abweichung zwischen visueller Reihenfolge und HTML-Struktur geachtet werden. Wenn diese Aspekte sorgfältig berücksichtigt werden, kann die order-Eigenschaft hilfreich sein, um dynamischere und flexiblere Layouts zu erstellen.
Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.