CSS Flexbox布局下的菜单设计：精确对齐与虚线分割
菜单设计中，菜名与价格的精准对齐，以及两者间的虚线分割，常常是令人头疼的问题。本文将介绍如何利用CSS的Flexbox布局，优雅地解决这一难题。
传统方法，例如根据字符数量计算分割线长度，往往难以保证精确对齐。而Flexbox提供了一种更简洁、更灵活的解决方案。
核心思路： 使用Flexbox的flex-grow属性分配剩余空间，并通过不同的方法创建虚线分割线。
首先，我们将菜名和价格容器设置为Flex容器，并使用flex: 0 0 auto确保它们根据内容自适应宽度，同时防止内容溢出：
立即学习“前端免费学习笔记（深入）”；
.menu-item {
display: flex;
align-items: center; /* 垂直居中对齐 */
}
.menu-item .dish-name, .menu-item .price {
flex: 0 0 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* 超出部分显示省略号 */
}
接下来，创建虚线分割线。这里提供三种实现方法：
方法一：线性渐变
利用linear-gradient创建重复的透明和颜色块，模拟虚线效果：
.menu-item .separator {
flex: 1 1 100%; /* 占据剩余空间 */
background-image: linear-gradient(to right, #ccc 50%, transparent 50%);
background-size: 10px 1px;
background-repeat: repeat-x;
height: 1px;
}
方法二：伪元素
使用伪元素::after，添加一个虚线边框：
.menu-item .separator {
flex: 1 1 100%;
position: relative;
}
.menu-item .separator::after {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
border-top: 1px dashed #ccc;
transform: translateY(-50%); /* 垂直居中 */
}
方法三：背景图片
使用预先准备好的虚线图片作为背景：
.menu-item .separator {
flex: 1 1 100%;
background: url('dotted-line.png') repeat-x center;
height: 10px; /* 根据图片高度调整 */
}
通过以上方法，结合Flexbox布局，可以轻松实现菜单中菜名和价格的精确对齐，以及中间的虚线分割，使菜单设计更简洁美观。 选择哪种方法取决于项目需求和个人偏好。
