CSS'te Esnek Öğeleri Ana Eksende Hizalama
justify-content özelliği, öğeleri ana eksen boyunca
hizalamanıza olanak tanır. Daha önce center,
space-between, space-around,
space-evenly değerlerini görmüştünüz. Şimdi birkaç
değer daha inceleyelim.
flex-start değeri öğeleri ana eksenin başına iter,
flex-end değeri ise sonuna iter. Örnekler üzerinde inceleyelim.
Örnek
flex-direction özelliğine row değerini vererek
ana ekseni soldan sağa yönlendirelim. Blokları eksenin başına
itelim. Bunun için justify-content değerini
flex-start olarak ayarlayalım:
.parent {
display: flex;
flex-direction: row; /* ana eksen soldan sağa */
justify-content: flex-start; /* bloklar ana eksenin başına */
}
Kodun çalıştırılmasının sonucu:
Örnek
Şimdi blokları eksenin sonuna itelim.
Bunun için justify-content değerini
flex-end olarak ayarlayalım:
.parent {
display: flex;
flex-direction: row; /* ana eksen soldan sağa */
justify-content: flex-end; /* bloklar ana eksenin sonuna */
}
Kodun çalıştırılmasının sonucu:
Örnek
Şimdi ana ekseni sağdan sola yönlendirelim,
flex-direction özelliğine row-reverse değerini
verelim. Blokları eksenin başına, yani sağ kenara itelim.
Bunun için justify-content değerini
flex-start olarak ayarlayalım:
.parent {
display: flex;
flex-direction: row-reverse; /* ana eksen sağdan sola */
justify-content: flex-start; /* bloklar ana eksenin başına */
}
Kodun çalıştırılmasının sonucu:
Örnek
Şimdi blokları ana eksenin sonuna, yani sol
kenara itelim. Bunun için justify-content
değerini flex-end olarak ayarlayalım:
.parent {
display: flex;
flex-direction: row-reverse; /* ana eksen sağdan sola */
justify-content: flex-end; /* bloklar ana eksenin sonuna */
}
Kodun çalıştırılmasının sonucu:
Örnek
Önceki örneklerde ana eksen yatay olarak yönlendirilmişti. Şimdi onu çevirip dikey olarak yönlendirelim.
flex-direction özelliğine column değerini
vererek ana ekseni aşağıya yönlendirelim.
Blokları ana eksenin başına, yani üst kenara itelim.
Bunun için justify-content değerini
flex-start olarak ayarlayalım:
.parent {
display: flex;
flex-direction: column; /* ana eksen yukarıdan aşağı */
justify-content: flex-start; /* bloklar ana eksenin başına */
}
Kodun çalıştırılmasının sonucu:
Örnek
Şimdi blokları ana eksenin sonuna, yani alt
kenara itelim. Bunun için justify-content
değerini flex-end olarak ayarlayalım:
.parent {
display: flex;
flex-direction: column; /* ana eksen yukarıdan aşağı */
justify-content: flex-end; /* bloklar ana eksenin sonuna */
}
Kodun çalıştırılmasının sonucu:
Örnek
Ana ekseni çevirip aşağıdan yukarıya yönlendirelim.
Bunun için flex-direction özelliğine
column-reverse değerini verelim. Bu
durumda bloklar sıralarını değiştirecek -
eksenin başında HTML kodundaki son blok duracak.
Blokları ana eksenin başına, yani alt kenara itelim.
Bunun için justify-content değerini
flex-start olarak ayarlayalım:
.parent {
display: flex;
flex-direction: column-reverse; /* ana eksen aşağıdan yukarı */
justify-content: flex-start; /* bloklar ana eksenin başına */
}
Kodun çalıştırılmasının sonucu:
Örnek
Blokları ana eksenin sonuna, yani üst kenara itelim.
Bunun için justify-content değerini
flex-end olarak ayarlayalım:
.parent {
display: flex;
flex-direction: column-reverse; /* ana eksen aşağıdan yukarı */
justify-content: flex-end; /* bloklar ana eksenin sonuna */
}
Kodun çalıştırılmasının sonucu:
