CSS как прижать блок к низу

Есть несколько способов, чтобы прижать блок к нижней части его родительского элемента:

1. Свойство «position: absolute» и «bottom: 0» для блочного элемента: задайте блочному элементу свойство «position: absolute» и «bottom: 0», чтобы привязать его к нижней части родительского элемента. Например:

.parent {
  position: relative;
}

.child {
  position: absolute;
  bottom: 0;
}

2. Свойство «display: flex», «flex-direction: column» и «justify-content: flex-end» для родительского элемента: задайте родительскому элементу свойства «display: flex», «flex-direction: column» и «justify-content: flex-end», чтобы выровнять дочерние элементы после друг друга по вертикали и закрепить их внизу. Например:

.parent {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

3. Свойство «display: grid» и «align-content: end» для родительского элемента: задайте родительскому элементу свойства «display: grid» и «align-content: end», чтобы прижать дочерние элементы к нижней части родительского элемента. Например:

.parent {
  display: grid;
  align-content: end;
}

Обратите внимание, что для применения свойства «align-content» к родительскому элементу, он должен иметь несколько строк или колонок. Если элементы размещаются в одной строке или колонке, вам нужно будет использовать решения, основанные на хаках, такие как использование псевдоэлементов или отрицательных отступов.