菜单对齐难？Flex布局如何帮您完美解决？

菜单对齐难？试试Flex布局！

对于菜单排版，如何让菜名和价格左右对齐，中间虚线居中，想必让不少人头疼不已。

基于这个思路，你可以设定一个基准，例如100个“·”，但可能会面临对齐不准的问题。

Flex布局解决之道：

采用Flex布局，可以让布局更加灵活。

菜名和价格对齐：

对于菜名和价格，直接使用flex: 0 0 auto即可，超出部分隐藏或裁剪。

中间虚线：

中间虚线采用flex: 1 1 100%，然后使用以下方式之一绘制虚线：

• 线性渐变：使用background-image进行线性渐变。
• 伪元素边框：使用伪元素创建边框。
• 背景图：插入虚线背景图。

以上就是菜单对齐难？Flex布局如何帮您完美解决？的详细内容，更多请关注其它相关文章！