Różnica między „justify-content” a „wyrównującymi elementami”

Podczas tworzenia strony internetowej należy wziąć pod uwagę układ elementu. „„Wyświetl Flex„Własność w CSS sprawia, że ​​element jest elastyczny, a jego zawartość jest łatwo uzasadniona i wyrównana, jeśli treść nie korzysta z wszystkich dostępnych przestrzeni. „„justify-content„Własność określa elementy na osi X, podczas gdy„Wyrównanie„Obiekt wyrównuje elementy do osi y.

Ten podręcznik pokaże różnicę między „justify-content" I "Wyrównanie”Elastycznego pojemnika.

Różnica między „justify-content” a „wyrównującym elementem” w CSS

CSS „justify-content”Właściwość określa, w jaki sposób przeglądarka przydziela przestrzeń między elementami zawartości i wokół nich wzdłuż głównej osi pojemnika Flex i osi enline kontenera sieci. Jednakże "Wyrównanie”Właściwość ustawia elementy na osi Y w Flexbox. W układzie siatki ustawia wyrównanie zawartości na osi bloku.

Wartości właściwości „Justify-Content”

„„justify-content„Właściwość może mieć wartości wymienione poniżej:

• Centrum
• przestrzeń pomiędzy
• przestrzeń-nawet
• kosmiczny
• Flex-start
• ELEX-end
• wstępny
• Dziedziczyć

Wartości właściwości „wyrównania”

„„Wyrównanie„Właściwość może mieć wartości wymienione poniżej:

• Centrum
• rozciągać się
• linia bazowa
• Flex-start
• ELEX-end
• wstępny
• Dziedziczyć

Jak uzasadnić zawartość CSS?

Aby uzasadnić zawartość w HTML, wykorzystując CSS, „justify-content" I "Wyrównanie„Używane są właściwości. W przypadku demonstracji podaliśmy przykład, w którym główny „div”Jest stosowany z nieruchomością”wyświetlacz„Wartość jako„przewód". Ta właściwość sprawi, że „div„Elastyczne dla swoich przedmiotów. Drugie pudełko w głównej „div”Pole będzie uzasadnione i wyrównane zgodnie z wartościami.

Kontynuuj określone kroki w celu lepszego zrozumienia.

Krok 1: Utwórz stronę HTML

Najpierw utwórz stronę HTML i dodaj następujące elementy:

• Dodać "„Element z nazwą klasy„skrzynka".
• Wewnątrz „„Pojemnik, dodaj kolejny„ ”i przypisz go klasę„Box-1”:

Krok 2: Pierwszy element stylu „Div”

Do stylizacji pierwszego „div„Element, dostęp do niego w CSS za pomocą przypisanej klasy”.skrzynka". Następnie zastosuj poniżej kodowane właściwości:

.skrzynka
granica: 2px stały blueviolet;
szerokość: 500px;
Wysokość: 250px;
Margines: 40px Auto;
Wyświetlacz: Flex;

Oto opracowanie powyższego kodowego fragmentu:

• "granica„Własność jest wykorzystywana do dostosowania granicy wokół Div.
• "szerokość„Własność o wartości„500px”Ustawia szerokość pudełka Div.
• "wysokość„Własność ustawia wysokość„ div ”na„250px".
• "margines”Określa przestrzeń„40px„Na górze i na dole.
• "wyświetlacz”Właściwość ustawia zachowanie wyświetlacza. Wartość "przewód”Sprawia, że ​​ten div jest elastyczny na swoje przedmioty.

Krok 3: Stylowy element „Div”

Uzyskaj dostęp do sekundy „div”Za pośrednictwem przypisanej klasy„.Box-1”I zastosuj na nim następujące CSS:

.Box-1
szerokość: 100px;
Wysokość: 100px;
kolor tła: czekolada;

„„szerokość" I "wysokość„Zastosowane są właściwości. A później "kolor tła„Właściwość ma zastosowanie do ustawienia koloru na tle elementu:

Krok 4: Zastosuj właściwość „Justify-Content”

Aby uzasadnić treść, zastosowaliśmy „justify-content„Nieruchomość jako„Centrum”Na głównym„div". Ta właściwość wyrównuje swoją zawartość zgodnie z podaną jej wartością:

.skrzynka
granica: 2px stały blueviolet;
szerokość: 500px;
Wysokość: 250px;
Margines: 40px Auto;
Wyświetlacz: Flex;
Justify-Content: Center;

Z poniższego obrazu może zauważyć, że główny „div„Wyrównuje jego treść”Box-1„Div w centrum na osi X:

Krok 5: Zastosuj właściwość „wyrównania”

„„Wyrównanie”Właściwość ustawia elementy na osi Y w Flexbox. W CSS dodaliśmy właściwość „wyrównania” jako „Centrum„Aby wyrównać zawartość w centrum wzdłuż osi Y:

.skrzynka
granica: 2px stały blueviolet;
szerokość: 500px;
Wysokość: 250px;
Margines: 40px Auto;
Wyświetlacz: Flex;
Justify-Content: Center;
Wyrównanie: Center;

Możesz to zobaczyć, pomyślnie uzasadniliśmy treść CSS:

Wykazaliśmy różnicę między Justify-Content a Align-Item i sposobem ich wykorzystania do uzasadnienia treści.

Wniosek

Właściwości "justify-content" I "Wyrównanie”Służą do określenia, w jaki sposób przeglądarka wyświetla zawartość. Właściwość Justify-Content dodaje marginesy wokół i między elementami wzdłuż osi X Flex Container i osi wbudowanej pojemnika siatki. Jednakże "Wyrównanie”Właściwość ustawia elementy na osi Y w Flexbox. Ten post opracował różnicę między Justify-Content a Align-Item i sposobem ich użycia do uzasadnienia treści.