CSS'de place-content özelliği, hem align-content hem de justify-content özelliklerini tek bir kısayolda birleştirir. Bu özellik, Flexbox ve Grid layoutlarında kullanılır ve içerik hizalaması için çapraz eksen (align-content) ve ana eksen (justify-content) boyunca öğelerin nasıl hizalandığını tanımlar. place-content özelliği, özellikle konteynerde birden fazla eksen hattı (satır veya sütun) olduğunda ve içeriğin hem yatay hem de dikey olarak nasıl hizalanacağını hızlı bir şekilde belirlemek istediğinizde kullanışlıdır.

place-content özelliği iki değer alır:

İlk değer align-content için, yani çapraz eksen hizalaması için kullanılır.

İkinci değer justify-content için, yani ana eksen hizalaması için kullanılır.

Eğer yalnızca bir değer belirtilirse, bu değer hem align-content hem de justify-content için kullanılır. İki farklı hizalama davranışı istiyorsanız, iki değeri boşlukla ayırarak belirtebilirsiniz.

place-content için kullanılabilir değerler, align-content ve justify-content için kullanılabilen değerlerle aynıdır:

flex-start

flex-end

center

space-between

space-around

space-evenly

stretch (yalnızca align-content için)

Örnek kullanımlar:

.container {
  display: flex; /* Veya display: grid; */
  place-content: center; /* Hem çapraz hem de ana eksen boyunca ortalar */
}

.container {
  display: grid;
  place-content: space-between stretch; /* Çapraz eksende space-between, ana eksende stretch kullanır */
}

Bu özellik, özellikle birden fazla satır veya sütuna sahip layoutlar oluştururken, içerik hizalamasını kolayca ve hızlı bir şekilde yönetmek için oldukça kullanışlıdır. Özellikle responsif tasarımlarda, çeşitli ekran boyutları için içerik hizalamasını optimize etmek amacıyla tercih edilir.

CSS'de place-items özelliği, bir konteyner içindeki öğelerin hem çapraz eksende (align-items) hem de ana eksende (justify-items) nasıl hizalandığını tanımlayan bir kısayoldur. Bu özellik, özellikle CSS Grid Layout'ta kullanılır, ancak Flexbox konteynerlerinde de align-items fonksiyonelliği için geçerlidir (Flexbox'ta justify-items desteklenmez). place-items özelliği, içerik hizalaması için birleşik bir yaklaşım sunar, böylece iki ayrı özellik yerine tek bir özellikle hem yatay hem de dikey hizalamayı kontrol edebilirsiniz.

place-items özelliği iki değer alır:

İlk değer align-items için kullanılır, yani öğelerin çapraz eksendeki hizalamasını belirler.

İkinci değer justify-items için kullanılır, yani öğelerin ana eksendeki hizalamasını belirler.

Eğer yalnızca bir değer belirtilirse, bu değer hem align-items hem de justify-items için kullanılır. İki farklı hizalama davranışı istiyorsanız, iki değeri boşlukla ayırarak belirtebilirsiniz.

place-items için kullanılabilir değerler:

start: Öğeler, hem çapraz hem de ana eksende konteynerin başlangıç kenarına hizalanır.

end: Öğeler, hem çapraz hem de ana eksende konteynerin bitiş kenarına hizalanır.

center: Öğeler, hem çapraz hem de ana eksende konteynerin ortasına hizalanır.

stretch: Öğeler, konteynerin hem çapraz hem de ana ekseni boyunca uzatılarak doldurulur (varsayılan align-items davranışıdır).

Örnek kullanımlar:

.container {
  display: grid; /* Veya display: flex; ve yalnızca align-items için geçerli olur */
  place-items: center; /* Öğeleri hem çapraz hem de ana eksende merkeze hizalar */
}

.container {
  display: grid;
  place-items: start end; /* Çapraz eksende başlangıca, ana eksende bitişe hizalar */
}

place-items özelliği, özellikle grid layoutlar oluştururken içerik hizalamasını kolay ve etkili bir şekilde yönetmek için kullanılır. Bu, web sayfalarında düzen ve tasarım oluştururken zaman kazandırır ve kodun okunabilirliğini artırır.

TailwindCSS:

Place Content

Place Items

Place Self