灵活运用inline-flex布局，解决元素间距随字体大小变化的问题
网页布局中，常常需要多个元素水平排列并保持固定间距，不受父元素字体大小的影响。 使用inline-flex布局虽然方便，但其间距会随父元素font-size或line-height变化而改变。 本文探讨如何解决此问题，确保inline-flex元素间距稳定。
问题：使用inline-flex布局的多个div水平排列，父元素设置了font-size和line-height后，div间距会随着字体大小变化，即使直接设置line-height也无效；而使用flex布局虽然能固定间距，却无法实现水平排列。
解决方案：采用双层容器嵌套策略，外层使用flex布局，内层使用inline-flex布局。 外层flex容器负责控制子元素的整体排列和间距（例如，使用justify-content: space-between;或justify-content: space-around;），内层inline-flex容器则负责子元素的内部排列和对齐。 这种方式巧妙地分离了整体布局和元素内部排列，从而实现既能水平排列，又能保持间距不受字体大小影响的效果。
