Unterschied zwischen Justify-Incontent und Align-Items

Beim Erstellen einer Website müssen das Elementlayout berücksichtigt werden. Der "Flex anzeigenDie Eigenschaft in CSS macht das Element flexibel, und sein Inhalt wird leicht gerechtfertigt und ausgerichtet, wenn der Inhalt nicht alle verfügbaren Platz verwendet. Der "RechtfertigungsbekämpfungEigenschaft gibt die Elemente auf der x-Achse an, während die “AusrichtungEigentum richtet Gegenstände auf die y-Achse aus.

Dieses Handbuch zeigt den Unterschied zwischen “Rechtfertigungsbekämpfung" Und "Ausrichtung”Des flexiblen Behälters.

Unterschied zwischen „Justify-Incontent“ und „Align-Item“ in CSS

Das CSS “RechtfertigungsbekämpfungEigenschaft gibt an, wie der Browser Platz zwischen und um Inhaltselemente entlang der Hauptachse eines Flexbehälters und der Inline -Achse eines Gitterbehälters zuteilt. Allerdings das “AusrichtungDie Eigenschaft legt die Elemente auf der Y-Achse in der Flexbox fest. In Grid -Layout setzt es die Ausrichtung des Inhalts auf die Blockachse fest.

Werte für die Eigenschaft „Justify-Incontent“

Der "RechtfertigungsbekämpfungEigenschaften können Werte haben, die unten aufgeführt sind:

• Center
• Weltraum dazwischen
• Weltraum
• Raumfahrt
• Flex-Start
• Flex-Ende
• Initial
• Erben

Werte für die Eigenschaft "Ausrichtung"

Der "AusrichtungEigenschaften können Werte haben, die unten aufgeführt sind:

• Center
• strecken
• Grundlinie
• Flex-Start
• Flex-Ende
• Initial
• Erben

So rechtfertigen Sie Inhalte mit CSS?

Um den Inhalt in HTML durch die Verwendung von CSS zu rechtfertigen, ist die “Rechtfertigungsbekämpfung" Und "AusrichtungEigenschaften werden verwendet. Für die Demonstration haben wir das Beispiel geliefert, in dem das Haupt “div"Wird mit der Eigenschaft angewendet"Anzeige"Wert als"biegen”. Diese Eigenschaft wird das machendiv”Flexibel zu seinen Gegenständen. Die andere Schachtel im Hauptkasten “divBox wird gerechtfertigt und nach den Werten ausgerichtet.

Verfolgen Sie die angegebenen Schritte, um ein besseres Verständnis zu erhalten.

Schritt 1: HTML -Seite erstellen

Erstellen Sie zunächst eine HTML -Seite und fügen Sie die folgenden Elemente hinzu:

• Füge hinzu ein ""Element mit dem Klassennamen"Kasten”.
• Drinnen “"Container, fügen Sie ein weiteres" "hinzu und weisen Sie ihm eine Klasse zu"Box-1”:

Schritt 2: Style First "Div" Element

Für das Styling des ersten ““div"Element, in CSS mit Hilfe der zugewiesenen Klasse darauf zugreifen".Kasten”. Wenden Sie dann die folgenden Eigenschaften an:

.Kasten
Grenze: 2px Solid Blueviolet;
Breite: 500px;
Höhe: 250px;
Rand: 40px Auto;
Anzeige: Flex;

Hier ist die Ausarbeitung des obigen Snippets:

• “GrenzeImmobilien wird verwendet, um die Rand um Div um anzupassen.
• “Breite”Eigenschaft mit einem Wert von“500px”Legt die Breite der Box Div fest.
• “Höhe"Eigenschaft setzt die Höhe des" Div "auf"250px”.
• “RandGibt einen Raum von “an“40px”Oben und unten.
• “AnzeigeDie Eigenschaft legt das Verhalten der Anzeige fest. Der Wert "biegen”Macht diesen Div flexibel zu seinen Gegenständen.

Schritt 3: Style Second "Div" Element

Zugang zu einer Sekunde “div"Durch die zugewiesene Klasse".Box-1Und wenden Sie das folgende CSS darauf an:

.Box-1
Breite: 100px;
Höhe: 100px;
Hintergrundfarbe: Schokolade;

Der "Breite" Und "HöheEigenschaften werden angewendet. Dann ist die "HintergrundfarbeDie Eigenschaft gilt für das Festlegen der Farbe im Hintergrund des Elements:

Schritt 4: Bewerben Sie die Eigenschaft „Justify-Incontent“

Um den Inhalt zu rechtfertigen, haben wir die “angewendet“RechtfertigungsbekämpfungEigentum als "Center”Auf der Hauptstufe“div”. Diese Eigenschaft stimmt ihren Inhalt nach dem ihm angegebenen Wert aus:

.Kasten
Grenze: 2px Solid Blueviolet;
Breite: 500px;
Höhe: 250px;
Rand: 40px Auto;
Anzeige: Flex;
Justify-Content: Center;

Aus dem folgenden Bild kann es beobachten, dass das Haupt “div"Räumen Sie seinen Inhalt aus"Box-1”Div in der Mitte der X-Achse:

Schritt 5: Bewerben

Der "AusrichtungDie Eigenschaft legt die Elemente auf der Y-Achse in der Flexbox fest. In der CSS haben wir die Eigenschaft "Align-items" als "hinzugefügt" hinzugefügt "als"Center”Um den Inhalt in der Mitte entlang der Y-Achse auszurichten:

.Kasten
Grenze: 2px Solid Blueviolet;
Breite: 500px;
Höhe: 250px;
Rand: 40px Auto;
Anzeige: Flex;
Justify-Content: Center;
Ausrichtung: Zentrum;

Sie können sehen, dass wir den Inhalt mit CSS erfolgreich gerechtfertigt haben:

Wir haben den Unterschied zwischen Justify-Incontent und Align-Item gezeigt und wie man sie verwendet, um den Inhalt zu rechtfertigen.

Abschluss

Die Eigenschaften "Rechtfertigungsbekämpfung" Und "AusrichtungWerden verwendet, um anzugeben, wie der Browser den Inhalt anzeigt. Die Anwaltschaftskontrolle fügt die Ränder um und zwischen den Elementen entlang der X-Achse des Flexbehälters und der Inline-Achse des Gitterbehälters hinzu. Allerdings das “AusrichtungDie Eigenschaft legt die Elemente auf der Y-Achse in der Flexbox fest. Dieser Beitrag hat sich über den Unterschied zwischen Justify-Inhalt und Ausrichtung und der Art und Weise, wie sie verwendet werden, ausgearbeitet, um den Inhalt zu rechtfertigen.