CSS-də Əsas Ox Boyunca Fleks Elementlərinin Düzülməsi
justify-content xassəsi
elementləri əsas ox boyunca düzməyə imkan verir. Əvvəllər
siz artıq center,
space-between, space-around,
space-evenly qiymətlərini keçmisiniz.
Gəlin indi daha bir neçə qiyməti öyrənək.
flex-start qiyməti elementləri əsas oxun
başlanğıcına, flex-end qiyməti isə sonuna doğru sıxışdırır.
Gəlin nümunələrə baxaq.
Nümunə
Əsas oxu soldan sağa yönləndirək, bunun üçün
flex-direction xassəsinə row qiymətini təyin edək.
Blokları oxun başlanğıcına sıxışdıraq. Bunun üçün justify-content
xassəsini flex-start qiymətinə qoyaq:
.parent {
display: flex;
flex-direction: row; /* əsas ox soldan sağa */
justify-content: flex-start; /* blokları əsas oxun başlanğıcına */
}
Kodun icrasının nəticəsi:
Nümunə
Gəlin indi blokları oxun sonuna sıxışdıraq.
Bunun üçün justify-content xassəsini
flex-end qiymətinə qoyaq:
.parent {
display: flex;
flex-direction: row; /* əsas ox soldan sağa */
justify-content: flex-end; /* blokları əsas oxun sonuna */
}
Kodun icrasının nəticəsi:
Nümunə
İndi əsas oxu sağdan sola yönləndirək,
bunun üçün flex-direction xassəsinə
row-reverse qiymətini təyin edək.
Blokları oxun başlanğıcına, yəni sağ kənara sıxışdıraq. Bunun üçün justify-content
xassəsini flex-start qiymətinə qoyaq:
.parent {
display: flex;
flex-direction: row-reverse; /* əsas ox sağdan sola */
justify-content: flex-start; /* blokları əsas oxun başlanğıcına */
}
Kodun icrasının nəticəsi:
Nümunə
İndi gəlin blokları əsas oxun sonuna,
yəni sol kənara sıxışdıraq. Bunun üçün justify-content
xassəsini flex-end qiymətinə qoyaq:
.parent {
display: flex;
flex-direction: row-reverse; /* əsas ox sağdan sola */
justify-content: flex-end; /* blokları əsas oxun sonuna */
}
Kodun icrasının nəticəsi:
Nümunə
Əvvəlki nümunələrdə əsas ox üfüqi istiqamətləndirilmişdi. Gəlin indi onu çevirək və şaquli istiqamətləndirək.
Gəlin əsas oxu aşağıya yönləndirək, bunun üçün
flex-direction xassəsinə
column qiymətini təyin edək.
Blokları əsas oxun başlanğıcına, yəni
yuxarı kənara sıxışdıraq. Bunun üçün justify-content
xassəsini flex-start qiymətinə qoyaq:
.parent {
display: flex;
flex-direction: column; /* əsas ox yuxarıdan aşağı */
justify-content: flex-start; /* blokları əsas oxun başlanğıcına */
}
Kodun icrasının nəticəsi:
Nümunə
Gəlin indi blokları əsas oxun sonuna,
yəni aşağı kənara sıxışdıraq. Bunun üçün justify-content
xassəsini flex-end qiymətinə qoyaq:
.parent {
display: flex;
flex-direction: column; /* əsas ox yuxarıdan aşağı */
justify-content: flex-end; /* blokları əsas oxun sonuna */
}
Kodun icrasının nəticəsi:
Nümunə
Əsas oxu çevirək, onu aşağıdan
yuxarıya yönləndirək. Bunun üçün flex-direction
xassəsinə column-reverse qiymətini təyin edək. Bu
halda bloklar öz sıralarını dəyişəcək -
oxun başlanğıcında HTML
kodunda sonuncu olan blok duracaq.
Gəlin blokları əsas oxun başlanğıcına,
yəni aşağı kənara sıxışdıraq. Bunun üçün justify-content
xassəsini flex-start qiymətinə qoyaq:
.parent {
display: flex;
flex-direction: column-reverse; /* əsas ox aşağıdan yuxarı */
justify-content: flex-start; /* blokları əsas oxun başlanğıcına */
}
Kodun icrasının nəticəsi:
Nümunə
Gəlin blokları əsas oxun sonuna,
yəni yuxarı kənara sıxışdıraq. Bunun üçün justify-content
xassəsini flex-end qiymətinə qoyaq:
.parent {
display: flex;
flex-direction: column-reverse; /* əsas ox aşağıdan yuxarı */
justify-content: flex-end; /* blokları əsas oxun sonuna */
}
Kodun icrasının nəticəsi:
