在网页开发中，使用 flex 布局来实现各种页面效果是非常常见的需求。今天我们就来探讨一个在 flex 布局下绘制菜单时遇到的难题：如何让菜名和价格左右对齐，并且在它们中间添加一条虚线。

我们需要了解 flex 布局的基本原理。Flexbox 即 Flexible Box，意为“弹性布局”，用于为盒状模型提供最大的灵活性。通过设置父元素的 display 属性为 flex 或 inline-flex，我们就开启了 flex 布局模式。

对于菜单的布局，我们可以将菜名和价格分别放在两个子元素中，然后利用 flex 的特性来实现左右对齐。假设我们有如下的 HTML 结构：

<div class="menu-item">
    <span class="dish-name">宫保鸡丁</span>
    <span class="price">38 元</span>
</div>

接着，在 CSS 中设置父元素 menu-item 的 display 为 flex，并使用 justify-content: space-between 来使菜名和价格分别靠左右两端对齐：

.menu-item {
    display: flex;
    justify-content: space-between;
}

到这一步，菜名和价格已经实现了左右对齐，但中间的虚线该如何添加呢？这就需要一些巧妙的方法。我们可以利用伪元素来创建这条虚线。

在 CSS 中，为 menu-item 添加一个伪元素 ::before 或 ::after，并设置其样式来模拟虚线：

.menu-item::before {
    content: "";
    border-top: 1px dashed gray;
    flex: 1;
    margin-top: 8px;
}

这里，content: "" 创建了一个空的伪元素，border-top 设置了顶部的虚线样式，flex: 1 让伪元素占据剩余的空间，从而将菜名和价格分隔开，margin-top 可以调整虚线的垂直位置。

通过这样的方式，我们就成功地使用 flex 布局实现了菜单中菜名、价格左右对齐且中间有虚线的效果。当然，在实际应用中，还可以根据具体需求对样式进行更多的调整和优化，比如修改虚线的颜色、宽度，以及菜名和价格的字体、间距等。掌握这些技巧，能让我们在网页布局时更加得心应手，为用户带来更好的视觉体验。