Align-content xassəsi

align-content xassəsi elementləri flex bloklar üçün en oxu boyunca, qridlər üçün isə şaquli ox üzrə düzləndirir. Valideyn elementə tətbiq edilir.

Sintaksis

cssselektor {
  align-content: flex-start | flex-end | center | space-between | space-around;
}

Dəyərlər

Nümunə . Flex-start dəyəri

Bu nümunədə düzləndirmənin aparıldığı ox yuxarıdan aşağıya doğru yönəlib, yəni en oxudur. Alınan nəticədən göründüyü kimi, bütün elementlərimiz onun yuxarı hissəsinə sıxılıb:

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;
}

Результат:

Nümunə . Flex-end dəyəri

Bu nümunədə bloklar en oxun aşağı tərəfinə sıxılıb, çünki align-content xassəsi flex-end dəyərində təyin edilib:

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;
}

Результат:

Nümunə . Center dəyəri

Hal-hazırda bloklar en oxun mərkəzinə görə düzləndirilib:

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;
}

Результат:

Qriddə şaquli oxun başlanğıcına görə düzləndirmə

Gəlin qriddə elementlərimiz üçün düzləndirməni şaquli oxun başlanğıcına görə təyin edək:

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;
}

Результат:

Qriddə şaquli oxun mərkəzinə görə düzləndirmə

İndi isə gəlin elementlərin düzləndirilməsini şaquli oxun mərkəzinə görə təyin edək:

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;
}

Результат:

Qriddə şaquli oxun sonuna görə düzləndirmə

Gəlin elementlərin düzləndirilməsini şaquli oxun sonuna görə təyin edək:

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;
}

Результат:

Həmçinin bax