Свойство align-content

Свойството align-content задава подравняването на елементите по напречната ос за flex блокове и по вертикалната ос за гридове. Прилага се към родителския елемент.

Синтаксис

cssселектор {
  align-content: flex-start | flex-end | center | space-between | space-around;
}

Стойности

Пример . Стойност flex-start

В този пример оста, по която се извършва подравняването, е насочена отгоре надолу, т.е. тя е напречна. Както се вижда от получения резултат, всички наши елементи са притиснати към горната ѝ част:

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

Результат:

Пример . Стойност flex-end

В този пример блоковете са притиснати към долната страна на напречната ос, тъй като свойството align-content е зададено със стойност flex-end:

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

Результат:

Пример . Стойност center

Сега блоковете са подравнени в центъра на напречната ос:

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

Результат:

Подравняване по началото на вертикалната ос в грид

Нека зададем подравняване за нашите елементи в грида по началото на вертикалната ос:

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

Результат:

Подравняване в центъра на вертикалната ос в грид

А сега нека зададем подравняване на елементите в центъра на вертикалната ос:

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

Результат:

Подравняване в края на вертикалната ос в грид

Нека зададем подравняване на елементите в края на вертикалната ос:

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

Результат:

Вижте също