html - 忽略 DOM 结构中的“楼层”或“级别”

Question

对于响应式网站，我有这样的结构：

<div class="menu_container">
    <ul class="menu">
        <li>item menu 1</li>
        <li>item menu 1</li>
    </ul>
    <ul class="menu">
        <li>item menu 2</li>
        <li>item menu 3</li>
        <li>item menu 4</li>
        <li>item menu 5</li>
    </ul>
</div>

（正好 2 个ul.menu，但每个都有一个非随机数li.item）“计算机”版本工作五个。但是对于智能手机，我需要这样的结构：

<div class="menu_container">
        <li>item menu 1</li>
        <li>item menu 1</li>
        <li>item menu 2</li>
        <li>item menu 3</li>
        <li>item menu 4</li>
        <li>item menu 5</li>
</div>

CSS（没有 JS ！）有没有办法“忽略” DOM 中的“楼层/级别”？我需要项目 menus上的 flex 行为，但设计被 DOM 中的事实弄乱了，它们被分为 2。

我希望实现的目标：一个垂直菜单，其中所有项目都采用相同的可用垂直空间，但不超过 50 像素。

.menu_container{
    height:100%;
    width:100%;
    display:flex;
    flex-direction: column;
 }
.menu_container li{
    flex:1;
    max-height:50px;
}

标签： htmlcssflexbox