如何用CSS Flexbox创建始终为2列、先填充首列的菜单

嘿，这就帮你搞定这个布局需求！用Flexbox实现这种“先填满第一列再到第二列”的2列布局其实很简单，核心就是利用列方向的Flex流+换行，再配合高度限制来触发换行。下面是完整的代码示例和解释：

示例代码 #

HTML结构 #

<ul class="menu-container">
  <li>前端开发</li>
  <li>后端开发</li>
  <li>移动开发</li>
  <li>UI/UX设计</li>
  <li>云计算</li>
  <li>大数据</li>
  <li>人工智能</li>
  <li>测试运维</li>
  <li>产品经理</li>
</ul>

CSS样式 #

.menu-container {
  /* 核心Flex属性 */
  display: flex;
  flex-direction: column; /* 元素垂直排列，优先填充第一列 */
  flex-wrap: wrap; /* 当容器高度不够时，自动换行到第二列 */
  height: 300px; /* 关键：必须设置高度，否则不会触发换行 */
  
  /* 模拟红色容器外观 */
  background-color: #dc3545; /* 红色背景，可根据需求调整色值 */
  padding: 1rem;
  margin: 0;
  list-style: none;
  width: 400px; /* 容器宽度，控制两列的总宽度 */
}

.menu-container li {
  /* 菜单项样式，可自定义 */
  padding: 0.8rem 1rem;
  color: #000; /* 不用白色字体，这里设为黑色 */
  border-bottom: 1px solid rgba(255,255,255,0.2); /* 可选：添加分隔线 */
  width: calc(50% - 2rem); /* 让每个菜单项占列宽的一半，减去padding的影响 */
}

/* 可选：鼠标悬停效果 */
.menu-container li:hover {
  background-color: rgba(255,255,255,0.1);
}

关键属性解释 #

• flex-direction: column：把Flex容器的主轴设置为垂直方向，元素会从上到下排列，优先填满第一列的空间。
• flex-wrap: wrap：当容器的垂直空间（高度）被填满后，剩余元素会自动换行到右侧的第二列。
• height：这是触发换行的核心，如果不设置高度，容器会无限垂直延伸，不会出现第二列。你可以根据菜单项的数量和高度调整这个值，确保刚好能分成两列。
• width: calc(50% - 2rem)：让每个菜单项刚好占一列的宽度，减去padding的间距，避免两列内容挤在一起。

这样就能完美实现你想要的红色容器2列布局，而且完全用Flexbox实现，符合你的学习需求~

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