Почему мой гибкий элемент выравнивается вправо, а не снизу? ⇐ CSS

[Anonymous]

Я не могу изменить HTML, только CSS. < /p>

• Код: Выделить всё

  LI

  установлен в Flex/Column

• Код: Выделить всё

  .button

  устанавливается в Align-Self: Flex-end;

Почему ребенок выровнен влево вместо снизу? Как я могу получить его там? PrettyPrint-Override ">

Код: Выделить всё

* { margin: 0; padding: 0; }

.placeholder {
object-fit: contain;
height: 14vh;
min-height: 10em;
background: #8af;
}

ul {
grid-template-columns: 1fr 1fr 1fr 1fr;
background: #ffc;
display: grid;
gap: 1em;
list-style-type: none;
}

@media only screen and (max-width: 1024px) {
ul {
grid-template-columns: 1fr 1fr 1fr;
}
}

@media only screen and (max-width: 768px) {
ul {
grid-template-columns: 1fr 1fr;
}
}

@media only screen and (max-width: 320px) {
ul {
grid-template-columns: 1fr;
}
}

li {
height: 28vh;
min-height: 20em;
border: 1px solid #000;
margin: 2px;
display: flex;
flex-direction: column;

}

.button {
background-color: #ae9962;
display: block;
align-self: flex-end;
}

h2 {
flex-grow: 1;
background: #f00;
}< /code>
[list]
[*]


Item 1 Title99€

test

[*]


Item 2 Title99€

test

[*]


Item 2 Title99€

test

[*]


Item 3 Title99€

test

[*]


Item 4 Title99€

test

[*]


Item 4 Title99€

test

[*]


Item 5 Title99€

test

[*]


Item 6 Title99€

test

[*]


Item 7 Title99€

test

[/list]

Подробнее здесь: https://stackoverflow.com/questions/796 ... -of-bottom