Уласцівасць 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;
}

Результат:

Глядзіце таксама