css - 如何以正确的方式在 y 轴上对齐我的 div？ CSS/flex

Question

我正在尝试构建一个登录页面，并有 3 个 SVG 图像，其中 2 个在顶部，1 个在右下角。它们都是绝对定位的，容器是相对显示的。

现在我基本上想要一个位于外容器顶部 30/40% 的 div。解决这个问题的最佳方法是什么？

1) 制作一个固定高度的 div，但这不是响应式的，我将使用媒体查询。

所以它是关于图像上显示的蓝色容器，因为红色框没有高度，因为它们是抽象的。

enter image description here有什么想法吗？

这个 div 应该在高度顶部的 30%。

什么方法最适合这个？

Answer 1

对于垂直对齐，您可以在容器上使用 flex-flow: column;。然后将 flex-basis 设置为 flex 元素的百分比。因此，您可以控制容器内子元素的相对高度。

参见:jsfiddle