Својството align-content

Својството align-content го задава усогласувањето на елементите долж попречната оска за flex блокови и по вертикалната оска за grid-ови. Се применува на родителскиот елемент.

Синтакса

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

Результат:

Усогласување по почеток на вертикална оска во grid

Ајде да го поставиме усогласувањето за нашите елементи во grid-от по почетокот на вертикалната оска:

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

А сега ајде да го поставиме усогласувањето на елементите по центарот на вертикалната оска:

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

Ајде да го поставиме усогласувањето на елементите по крајот на вертикалната оска:

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

Результат:

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