CSS (Cascading Style Sheets) dilinde, "align-items" özelliği, bir kutunun içindeki child (çocuk) elementlerinin yatay düzlemde nasıl düzenleneceğini belirler. Bu özellik, flexbox layout sistemi ile kullanılır ve child elementlerin yatay düzlemde düzenlenmesinde önemli bir rol oynar.

"align-items" özelliği, kutunun içindeki child elementlerin yatay düzlemde nasıl düzenleneceğini belirlemek için birçok değer alabilir. Bu değerler arasında en yaygın olarak kullanılanlar aşağıdadır.

"flex-start": Bu değer kullanıldığında, child elementler kutunun en üst kısmına hizalanır.

.container {
  display: flex;
  align-items: flex-start;
}

"center": Bu değer kullanıldığında, child elementler kutunun ortasına hizalanır.

.container {
  display: flex;
  align-items: center;
}

flex-end": Bu değer kullanıldığında, child elementler kutunun en alt kısmına hizalanır.

.container {
  display: flex;
  align-items: flex-end;
}

"stretch": Bu değer kullanıldığında, child elementler kutunun genişliğine göre uzatılır.

.container {
  display: flex;
  align-items: stretch;
}

baseline": Bu değer kullanıldığında, child elementlerin metin taban hizasına göre hizalanır.

.container {
  display: flex;
  align-items: baseline;
}