将绝对定位的元素带回到flexbox父元素的流中

Question

我正在使用导航和嵌套子窗口进行布局。 subnav的底部需要与父元素的底部对齐。为了节省一些阅读，描述这个的最简单方法就是指向我制作的CodePen。

http://codepen.io/freshyill/pen/drxaJ

现在，要真正解释我尝试做的事情：

• 导航（特别是subnav）需要与父级的底部对齐。
• 父元素为display: flex和justify-content: flex-end，因此导航将与底部对齐。
• 主要导航是水平的position: relative。
• subnav也是水平的，导航下方是position: absolute。
• 搜索区域的高度未知，并且不需要与父级顶部对齐

问题在于，由于subnav为position: absolute，因此主要导航，而不是subnav实际位于底部，而subnav位于父级之外。

还有一些事情......

• 我几乎无法控制导航列表的标记。
• 我可以通过在subnav上设置高度并为主导航提供相同值的下边距来解决此问题。我试图避免这种情况。
• 真正的subnav将翻转以显示其他子视图
• 我愿意考虑其他解决方案来移动导航下方的subnav。

Answer 1

imho没有必要绝对位置，你可以使用负边距。

例如，如果子菜单是第三个按钮下的子菜单，要重置其左偏移量，只需执行margin-left:-200%

DEMO：http://jsfiddle.net/rupco3wh/

这里是解决方案的关键：

ul.navlist > li > ul.subnav
{
    width:400%;
}

ul.navlist > li:nth-child(2) > ul.subnav
{
    margin-left:-100%;
}

ul.navlist > li:nth-child(3) > ul.subnav
{
    margin-left:-200%;
}

ul.navlist > li:nth-child(4) > ul.subnav
{
    margin-left:-300%;
}

希望它符合您的需求