Beispielcode für CSS-Spalten zum Erreichen eines zweiseitig ausgerichteten Layouts

1. Im Kreis herumlaufen

Nach einigem Herumexperimentieren bin ich schließlich zu dem Schluss gekommen, dass die Verwendung von CSS-Spalten der einfachste Weg ist, ein Blocksatzlayout zu erzielen.

Wenn wir beispielsweise die Elemente von drei Spalten an beiden Enden mit einem Abstand von 30 Pixeln in der Mitte ausrichten möchten, lautet der CSS-Code:

.container {
    Spalten: 3 30px;
}

Ding Dong, es ist vorbei, das Spiel ist vorbei~

Es ist lächerlich einfach.

Zweifeln Sie nicht, schauen Sie sich ein Beispiel für Echtzeit-Rendering an:

<div Klasse="Container">
    <div Klasse="zhang"></div>
    <div Klasse="xin"></div>
    <div Klasse="xu"></div>
</div>

.container {
    Spalten: 3 30px;
}
.container > div {
    Polsterung: 50px;
    Hintergrund: tiefes Himmelblau;
}

Der Echtzeit-Rendering-Effekt ist wie folgt

2. Vor- und Nachteile der Spaltenimplementierung

Vorteil

Verglichen mit dem Ausrichtungseffekt des Abstands zwischen den Werten in Flex- und Grid-Layouts besteht der größte Vorteil der Verwendung des CSS-Spaltenlayouts darin, dass der ursprüngliche display des HTML-Elements geschützt wird und außerdem weniger Code erforderlich ist.

Beispielsweise enthalten <li> -Elemente im Browser standardmäßig Aufzählungszeichen, etwa Punkte, oder Zahlenfolgen.

Wenn Sie das Flex- oder Grid-Layout verwenden, müssen Sie display:flex oder display:grid festlegen. Wenn Sie den ursprünglich berechneten Wert display:list-item ändern, verschwinden die Punkte oder numerischen Zahlen.

Um diesen Vorteil zu nutzen, habe ich eine Demo erstellt, die Sie hier anklicken können: Demo zum Beibehalten des Listentyps und Ausrichten der Spalten an beiden Enden

Es ist ersichtlich, dass <li> -Elements den Ausrichtungseffekt beibehalten und das Standardpunktsymbol des <li> -Elements selbst ebenfalls beibehalten wird, wie in der folgenden Abbildung dargestellt.

Dies ist etwas, was mit Flex Layout und Grid Layout nicht so leicht erreicht werden kann.

Mangel

Es eignet sich für den Ausrichtungseffekt einzeiliger Elemente. Wenn die Listenelemente viele Zeilen haben, ist das Spaltenlayout nicht einfach zu handhaben. Erstens wird der Fluss der Liste in vertikaler Richtung priorisiert. Zweitens können leicht unerwartete Szenarien auftreten, in denen die Liste vertikal geteilt ist.

3. Fazit

Obwohl es in der tatsächlichen Entwicklung nicht praktikabel ist, CSS-Spalten zu verwenden, um den Layouteffekt an beiden Enden zu erzielen, gibt es dennoch viele Einschränkungen.

Das einzige geeignete Szenario ist, wenn der Layouteffekt an beiden Enden erreicht wird, ohne den Anzeigewert zu ändern. Obwohl solche Szenarien relativ selten sind, gibt es so viele tatsächliche Entwicklungsprojekte und Tausende von Nutzungsszenarien, dass es schwer ist, zu garantieren, wann Sie auf sie stoßen werden. Zu diesem Zeitpunkt kann durch die Verwendung von nur wenigen Buchstaben wie columns:3 30px ein exquisiter Layouteffekt erzielt werden. Ist das nicht großartig?

Tatsächlich ist die Technologie so. Es gibt nur sehr wenige APIs, die nutzlos und völlig nutzlos sind. Ihre Existenz hat einen Grund und ihr Auftreten ist wertvoll, aber ihre Nutzungsszenarien dienen der Bewältigung atypischer Szenarien.

Lernen Sie es, verstehen Sie es, und Sie werden die Ergebnisse möglicherweise nicht in kurzer Zeit sehen, aber mit zunehmender Projekterfahrung werden Sie definitiv auf geeignete Nutzungsszenarien stoßen. Andere werden immer noch Kopfschmerzen haben, wie sie es erreichen können, und weiterhin bei Google suchen, aber Sie können ein solches Bedürfnis im Handumdrehen erfüllen und ein paar Codezeilen schreiben. Dieses Gefühl wird Sie süchtig machen. Wie ist es? Es ist das Gefühl, der Kontrolleur der Technologiewelt zu sein, die zahlreichen Codes zu überblicken und in der Codewelt unübertroffen zu sein. Im Wesentlichen ist es ein Gefühl, Macht zu kontrollieren und ein technischer Experte zu sein.

Obwohl CSS-Spalten mit hoher Wahrscheinlichkeit zur Implementierung des Layouts an beiden Enden verwendet werden, ist ihr eigener Wert daher nicht gering.

Nun, dieser Artikel stellt technisch keine großen Herausforderungen dar, er dient hauptsächlich dazu, einige Layout-Tipps zu geben.

Adresse dieses Artikels: https://www.zhangxinxu.com/wordpress/?p=9429

Dies ist das Ende dieses Artikels darüber, wie Sie mit CSS-Spalten den Blocksatzeffekt erzielen. Weitere Informationen zum Blocksatzeffekt mit CSS-Spalten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!