align-content Özelliği

align-content özelliği, flex bloklar için çapraz eksen boyunca, grid'ler için ise dikey eksende öğelerin hizalanmasını belirler. Ebeveyn öğeye uygulanır.

Sözdizimi

cssseçici {
  align-content: flex-start | flex-end | center | space-between | space-around;
}

Değerler

Örnek . flex-start Değeri

Bu örnekte, hizalamanın yapıldığı eksen yukarıdan aşağıya doğru yönlendirilmiştir, yani çapraz eksendir. Elde edilen sonuçtan görüleceği üzere, tüm öğelerimiz onun üst kısmına dayalıdır:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Örnek . flex-end Değeri

Bu örnekte bloklar çapraz eksenin alt tarafına dayalıdır, çünkü align-content özelliği flex-end değerine ayarlanmıştır:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: flex;
  align-content: flex-end;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Örnek . center Değeri

Şu anda bloklar çapraz eksenin ortasına göre hizalanmıştır:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Grid'de Dikey Eksenin Başlangıcına Hizalama

Grid'deki öğelerimiz için hizalamayı dikey eksenin başlangıcına ayarlayalım:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  align-content: start;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Grid'de Dikey Eksenin Ortasına Hizalama

Şimdi de öğelerin hizalamasını dikey eksenin ortasına ayarlayalım:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  align-content: center;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Grid'de Dikey Eksenin Sonuna Hizalama

Öğelerin hizalamasını dikey eksenin sonuna ayarlayalım:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  align-content: end;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Ayrıca Bakınız