使用flex CSS定位

Question

我正在尝试使用HTML，CSS和JS创建类似应用的体验网络应用。这就是我想要实现的目标：

我将body＆amp; html宽度设置为100vw，高度设置为100vh。然后我继续将TopBar高度设置为40vh，同时给予身体剩余的60vh值。我在TopBar中添加了三个div（绿色的）并给了他们这些值：

display:flex;
position:relative;
flex-direction:column;

然后继续将这些值赋予第一个元素：

width:100%;
align-self:flex-start;

，除了我使用 flex-end 之外，为最后一个元素进行了相同的操作;

所以一切看起来还不错，期待中间的一个正对齐到它的最高位置，当屏幕更高时（在iPhone 6Plus中），它与自己和最后一个元素之间留下了巨大的差距。

有没有办法可以在不使用绝对位置的情况下将其垂直放在容器中？

谢谢！

Answer 1

我设法通过在flex对象的中间元素上使用“vmin”作为填充单元来解决这个问题。