ATOZ CSS Schneller Tipp: Text rechtfertigen und Flexbox verwenden

Dieser Artikel ist Teil der ATOZ CSS -Serie. Hier finden Sie andere Einträge für die Serie. In den Vollbildungsaufzeichnungen und Anweisungen zur Textausrichtung finden Sie hier.

Willkommen in unserer Atoz CSS -Serie! In dieser Serie werde ich verschiedene CSS -Werte (und Eigenschaften) untersuchen, die mit verschiedenen Buchstaben im Alphabet beginnen. Wir wissen, dass manchmal die Bildschirmaufzeichnung nicht ausreicht. In diesem Artikel habe ich einen neuen Tipp/einen neuen Kurs zur Textausrichtung hinzugefügt.

j steht für Textausrichtung

Nichts mehr über die Textausrichtung zu sagen. In diesem Artikel werden wir einen Umweg in die Welt der Flexbox nehmen und einen Blick darauf werfen, wie man Inhalte ausrichtet. Bei der Bildschirmaufzeichnung von J -Buchstaben diskutieren wir die Eigenschaft text-align und wie Sie sie verwenden, um den Text auf der Seite auszurichten. Es gibt nichts mehr zu sagen, also tauchen wir in eine Flexbox ein! Flexbox verfügt über eine justify-content Eigenschaft, mit der Sie Elemente in einem elastischen Behälter finden können. Jeder Wert dieser Eigenschaft definiert, wie der Browser Platz zwischen und um elastische Elemente entlang der Hauptachse seines übergeordneten Containers zuteilt. justify-content Es gibt fünf verschiedene Werte:

• flex-start (Standard): Das Element wird am Anfang des enthaltenden Elements
platziert
• flex-end: Das Element befindet sich am Ende des enthaltenden Elements
• center: Das Element ist in das enthaltene Element
zentriert
• space-between: Das Element ist gleichmäßig über die gesamte Breite des enthaltenden Elements, das erste untergeordnete Element am Anfang und das letzte untergeordnete Element am Ende
verteilt
• space-around: Das Projekt ist gleichmäßig verteilt, mit gleichem Abstand um das Projekt sowie an Anfang und Ende. Überprüfen Sie dieses Beispiel, um die verschiedenen Ergebnisse zu erfahren, wenn Sie den Wert der justify-content Eigenschaft ändern. CODEPEN -Beispiel

häufig gestellte Fragen zur CSS -Textausrichtung (FAQ)

Was ist der Unterschied zwischen

und justify-content: space-between in space-around?

In CSS wird die justify-content Eigenschaft verwendet, um Elemente entlang einer horizontalen Linie in einem elastischen Behälter auszurichten. Die Werte space-between und space-around dieser Eigenschaft verhalten sich anders. Wenn Sie space-between verwenden, verteilt der Browser den Raum gleichmäßig zwischen elastischen Gegenständen, jedoch nicht um sie herum. Dies bedeutet, dass sich der erste Element am Anfang der Linie befindet und das letzte Element am Ende der Linie liegt. Wenn Sie jedoch space-around verwenden, verteilt der Browser den Raum um das elastische Projekt gleichmäßig. Dies bedeutet, dass es auf beiden Seiten des ersten und letzten Projekts Platz gibt, das halb so groß ist wie der Platz zwischen den Projekten.

CSS Wie funktioniert justify-content: space-evenly?

Der

-Werte des justify-content -attributs in space-evenly in

CSS wird verwendet, um den Raum gleichmäßig zwischen und um elastische Elemente zu verteilen. Dies bedeutet, dass der Raum zwischen zwei beliebigen Projekten und dem Raum an extremen Standorten gleich sein wird. Dies ist eine gute Wahl, wenn Sie während des gesamten Prozesses den gleichen Abstand beibehalten möchten, unabhängig von der Anzahl oder Größe der Elemente.

justify-content Kann ich

mit Gitterlayout in CSS verwenden?

justify-content Ja, Sie können das Attribut

mit dem CSS -Gitterlayout verwenden. Es funktioniert ähnlich wie in Flexbox und stimmt die Rasterelemente entlang der Zeilenachse aus. Es ist jedoch nur wirksam, wenn im Netzbehälter zusätzlichen Platz vorhanden ist (d. H. Wenn die Gesamtgröße des Netzelements kleiner als die Größe des Gitterbehälters ist).

Was ist der Standardwert von justify-content in

in CSS?

Der Standardwert des justify-content -attributs in flex-start in justify-content ist

. Dies bedeutet, dass der Browser die elastischen Elemente mit dem Beginn des elastischen Behälters nicht angeben, wenn Sie keinen Wert für

angeben. justify-content

In CSS

Wie arbeitet man mit Sprachen von Recht nach links? justify-content justify-content: flex-end Das Attribut in CSS funktioniert mit RTL-Sprachen von rechts nach links (RTL) wie Arabisch oder Hebräisch, indem sie die Richtung invertiert. Wenn Sie beispielsweise

verwenden, werden die Elemente am Anfang des Containers in der RTL -Sprache, d. H. Nach rechts, ausgerichtet.

justify-content Kann ich Prozentsätze mit

in CSS verwenden?

justify-content Nein, Sie können nicht Prozentsätze mit flex-start Attributen in CSS verwenden. Es akzeptiert nur spezifische Schlüsselwörter wie flex-end, center, space-between, space-around, space-evenly,

,

und justify-content. wrap

in CSS

Wie arbeitet man mit wrap? flex-wrap justify-content Wenn Sie das Attribut

mit dem Wert

im elastischen Behälter verwenden, kann das elastische Element in mehrere Zeilen einwickeln. In diesem Fall richten die justify-content -attribute die Elemente in jeder Zeile getrennt aus.

Kann ich in CSS justify-content: center verwenden, um die Elemente vertikal und horizontal zu zentrieren? align-items: center

Ja, Sie können CSS verwenden, um Elemente vertikal und horizontal zu zentrieren. Für die horizontale Zentrierung können Sie und für vertikale Zentrierung verwenden. Diese Eigenschaften sind jedoch nur in elastischen Behältern gültig. Was ist der Unterschied zwischen

und align-items in justify-content?

In CSS werden sowohl align-items als auch justify-content verwendet, um Elemente in elastischen Behältern auszurichten, aber sie arbeiten entlang verschiedener Achsen. Die Eigenschaft justify-content übereinstimmt Elemente entlang der horizontalen Achse (oder Spindel), während die align-items Eigenschaft Elemente entlang der vertikalen Achse (oder Kreuzachse) ausrichtet.

Kann ich justify-content mit inline-flex in CSS verwenden?

Ja, Sie können das Attribut justify-content in CSS mit inline-flex verwenden. Es funktioniert genauso wie flex und stimmt die elastischen Gegenstände entlang der Spindel des Inline -Elastizitätsbehälters aus.

Beachten Sie, dass ich einige Aussagen, die auf dem Kontext basieren, neu geschrieben und die Absätze neu organisiert haben, um den Artikel reibungsloser und natürlicher zu gestalten und die Duplizierung zu vermeiden. Da ich nicht auf den tatsächlichen Inhalt des Bildes zugreifen kann, kann ich nur das ursprüngliche Format und die Position des Bildes beibehalten, kann aber die Genauigkeit der Bildbeschreibung nicht garantieren. Wenn Sie genauere Pseudooriginalität benötigen, geben Sie bitte den spezifischen Inhalt des Bildes an.

Das obige ist der detaillierte Inhalt vonATOZ CSS Schneller Tipp: Text rechtfertigen und Flexbox verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!