如何在不修改HTML仅给LI加类的情况下将UL设为指定两栏布局？

我有一段CMS生成的菜单标记，没办法修改整体结构，只能给每个li添加自定义类。现在需要调整布局，原始标记代码如下：

<ul class="sub-menu"> 
  <li><a>something</a></li> 
  <li><a>something</a></li> 
  <li><a>something</a></li> 
  <li><a>something</a></li> 
  <li><a>something</a></li> 
  <li><a>something</a></li> 
  <li class="somestuff">some markup</li> 
</ul>

当前CSS实现的效果是这样的：

我想要实现的目标效果是：

想问问能不能通过给.sub-menu设置Flexbox来实现这个布局？需要把带有.somestuff类的绿色块放在右侧区域。

解决方案：当然可以！ #

用Flexbox完全能满足这个需求，具体思路和代码如下：

1. 给父容器设置Flex布局
   先给.sub-menu开启Flex，允许元素换行，同时设置顶部对齐：

.sub-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; /* 让所有元素顶部对齐 */
  gap: 1rem; /* 给菜单项之间加一些间距，视觉更舒服 */
  padding: 0;
  list-style: none; /* 去掉默认的列表样式 */
}

2. 控制左侧菜单项的排列
   给前6个li添加自定义类（比如.menu-item），设置它们的宽度，实现两排三列的效果：

.menu-item {
  flex: 0 0 calc(33.333% - 0.666rem); 
  /* 33.333%实现三列，减去gap的1rem的三分之二，保证总宽度不溢出 */
  padding: 0.5rem;
  box-sizing: border-box;
}

3. 把绿色块推到右侧
   利用Flexbox的margin-left: auto特性，直接把.somestuff元素推到容器右侧，同时可以设置它的宽度和样式：

.somestuff {
  margin-left: auto; /* 关键属性，自动填充左侧空间，把元素挤到右边 */
  flex: 0 0 calc(33.333% - 0.666rem); /* 和左侧菜单项宽度保持一致 */
  background: #7ccd7c; /* 对应你的绿色块背景 */
  padding: 1rem;
  box-sizing: border-box;
}

这样调整后，前6个菜单项会自动分成两排三列，.somestuff块会精准对齐到右侧，完美匹配你想要的布局效果。如果不需要严格的三列宽度，也可以把.menu-item的flex属性改成flex: 1 1 30%，让它们自适应容器宽度，灵活性更高。

内容的提问来源于stack exchange，提问作者MindPhuq