gpt4 book ai didi

html - 垂直居中一个元素和底部对齐另一个与动态高度(flexbox)

转载 作者:行者123 更新时间:2023-11-28 01:13:22 26 4
gpt4 key购买 nike

这是我多次遇到的问题,我想这次我会尝试寻求一个明确的答案。我想要做的是将一个元素垂直居中,同时让另一个元素充当“页脚”并捕捉到同一容器的底部。像这样:

enter image description here

问题是页脚将具有动态高度。预期的行为是,如果有足够的空间,中间元素将保持垂直居中;如果页脚变得太大而无法发生,居中的内容将向上移动,为页脚腾出空间。

我找到的最接近的解决方案是 this question .但就像我见过的所有其他解决方案一样,它需要知道页脚的高度。

我有一种预感,这对 flexbox 来说是不可能的。我最终总是退而求其次的解决方案是在页脚上使用 position: absolute 的经典 position: relative 包装器。

Here's a demo fiddle如果您想查看我上次尝试的中断位置。

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;
}
<flex-container>
<flex-spacer></flex-spacer>
<flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-item>
<flex-footer>
this is the footer element<br /> this is the footer element<br />
</flex-footer>
</flex-container>

最佳答案

您需要的是一个用于整个容器的 flexbox,以及一个用于内容本身的嵌套 flexbox。这允许您应用两种不同的对齐规则,同时保持 flexbox 众所周知的“灵 active ”。

您的一些其他元素(例如“间隔物”)是不必要的。

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

flex-container > flex-center-content {
display:flex;
height:100%;
width:100%;
align-items:center;
justify-content:center;
}

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

flex-container > flex-center-content > flex-item {
border: 4px solid aqua;
height: 50px;
width: 50px;
margin: 0 5px;
}
<flex-container>
<flex-center-content>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-center-content>
<flex-footer>
this is the footer element<br />
this is the footer element<br />
this is footeeeeer<br>
look how tall I am<br>
and how much I push things<br>
</flex-footer>
</flex-container>

FIDDLE

关于html - 垂直居中一个元素和底部对齐另一个与动态高度(flexbox),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51988728/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com