Flexbox align-self: flex-start / end регулируется горизонтально, а не вертикально

Question

В моем гибком контейнере я сделал это

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.child {
  align-self: flex-start;
}

По какой-то причине дочерний элемент не регулируется в верхней части элемента контейнера, а вместо этого регулируется по горизонтали.Я делаю что-то неправильно с flex?

Codepen

Если вы удалите дочерний элемент css.Он корректируется назад к центру по горизонтали.

Answer 1

Если вы хотите отобразить элемент title в центре вверху страницы, а содержимое - под ним, вы можете использовать

.title {
  align-self: center;
  justify-self: flex-start;
  padding: 2.4rem;
}

и для содержимого

.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
}

Это должно сработать.В любом другом случае измените поля или просто удалите их, и элемент content будет идти под заголовком.