在Flexbox中动态更改div对齐方式

时间:2019-03-24 10:10:40

标签: css flexbox

我有一个<ul>元素作为具有行方向的flex容器。每个<li>元素都有一个包含在div中的菜单,该菜单在发生某些事件时向右打开。

问题是,菜单从<li>开始一直流到flex容器边界的右侧。

我想要的是,菜单将知道何时从其上级<li>向右伸展,以及何时向左伸展,这取决于右边是否仍有足够的空间。

这是问题范围的骨架:

<ul style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;">
    <li ng-repeat="items-in-some-source">
        <div>
            <!-- some stuff -->
            <div>
                <!-- some other stuff -->
            </div>
            <div style="position:relative;" ng-include="some-menu-template.html"></div>
        </div>
    </li>
</ul>

这是预期的结果,菜单在第一行关闭,有些示例在打开的菜单下一行。请注意<li id=D>元素的行为,还请注意<li>元素的数量是动态的:

enter image description here

这就是现在发生的情况,请注意<li id=D>如何使flex容器溢出:

enter image description here

那么,有什么方法可以仅使用CSS来实现?我不想为此使用Javascript解决方案。

0 个答案:

没有答案