菜单对齐难？试试Flex布局！
对于菜单排版，如何让菜名和价格左右对齐，中间虚线居中，想必让不少人头疼不已。
基于这个思路，你可以设定一个基准，例如100个“·”，但可能会面临对齐不准的问题。
Flex布局解决之道：
采用Flex布局，可以让布局更加灵活。
菜名和价格对齐：
对于菜名和价格，直接使用flex: 0 0 auto即可，超出部分隐藏或裁剪。
中间虚线：
中间虚线采用flex: 1 1 100%，然后使用以下方式之一绘制虚线：
线性渐变：使用background-image进行线性渐变。 伪元素边框：使用伪元素创建边框。 背景图：插入虚线背景图。
以上就是菜单对齐难？Flex布局如何帮您完美解决？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1632171.html
微信扫一扫 
支付宝扫一扫 
