Вертикально центрируйте один элемент, а другой-другой с динамической высотой (Flexbox) ⇐ CSS

[Anonymous]

Это проблема, с которой я сталкивался много раз и решил, что на этот раз я попытался бы получить окончательный ответ. То, что я пытаюсь сделать, является центром элемента по вертикали, когда есть еще один элемент, действуя как «нижний нижний колонтитул» и щелкнув на дно того же контейнера. Как так: < /p>

< /p>

Проблема заключается в том, что подножие будет иметь динамическую высоту. Ожидаемое поведение заключается в том, что если места достаточно, средний элемент останется центрированным вертикально; Если нижний колонтитул становится слишком большим, чтобы это произошло, центрированный контент сместится вверх, предоставляя место для нижнего колонтитула. Но, как и любое другое решение, которое я видел, это требует знания высоты нижнего колонтитула. Решение, в которое я всегда возвращаюсь,-это классическая позиция: относительная < /code> обертка с позицией: Absolute < /code> на нижнем колонтитуле. < /P>

Вот демо-скстошка, если вы хотите увидеть, где я остановился на моей последней попытке. < /P>


"br />" Br /> "Br />" br /> "br />" br /> "Br />

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

flex-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 4px solid blue;
height: 300px;
width: 300px;
}

flex-container>flex-spacer {
margin-top: auto;
visibility: hidden;
}

flex-container>flex-item {
display: flex;
}

flex-container>flex-footer {
margin-top: auto;
margin-bottom: auto;
}

flex-container>flex-spacer,
flex-container>flex-footer {
border: 4px solid chartreuse;
}

flex-container>flex-item>flex-item {
border: 4px solid aqua;
height: 50px;
width: 50px;
margin: 0 5px;
}< /code>








this is the footer element
this is the footer element

Подробнее здесь: https://stackoverflow.com/questions/519 ... ht-flexbox