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

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《菜单对齐难？Flex布局如何帮您完美解决？》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

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

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

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

Flex布局解决之道：

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

菜名和价格对齐：

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

中间虚线：

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

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

终于介绍完啦！小伙伴们，这篇关于《菜单对齐难？Flex布局如何帮您完美解决？》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！