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:

css.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:

css.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:

css.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:

css.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:

css.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:

css.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:

css.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:

css.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:

Pratik Görevler