feat：动态计算弹性盒子两侧padding

resource/staticres/css/mobile/tag-module-common.css

@@ -594,11 +594,11 @@ body.loading {
 .tag-city-nav .tag-city-nav-main{
   display: flex;
   flex-wrap: wrap;
-  padding: 0 .14rem;
+  /* padding: 0 .14rem; */
 }
 .tag-city-nav .city-nav-item{
   display: inline-block;
-  margin: 0 .11rem .22rem;
+  margin: 0 .22rem .22rem 0;
   padding: .04rem .16rem;
   border-radius: .08rem;
   font-size: .26rem;

resource/template/mobile/area_city_list.html

@@ -25,5 +25,46 @@
   </div>
   <script src='{{Cdn}}/common-module/public/js/utils.js?v={{Msg "version"}}'></script>
   <script src='{{Cdn}}/jybx/js/mobile/tag-common.js?v={{Msg "version"}}'></script>
+  <script>
+    // 动态设置弹性盒子左右两侧padding
+    function getFlexboxPadding(flexContainer) {
+      const children = flexContainer.children
+      if (children.length === 0) return 0
+      // 获取所有子元素距左侧最远的元素（降序排列取第一个）
+      var maxLeftDom = Array.from(children).sort(function(a, b) {
+        return b.getBoundingClientRect().left - a.getBoundingClientRect().left
+      })[0]
+      var maxLeft = maxLeftDom.getBoundingClientRect().left
+      var maxLeftWidth = maxLeftDom.getBoundingClientRect().width
+      // 获取父元素盒子的宽度
+      var parentWidth = flexContainer.getBoundingClientRect().width
+      // 计算剩余宽度（父元素宽度 - 距左侧最远的元素宽度 - 距左侧最远的距离）
+      var calcWidth = parentWidth - maxLeftWidth - maxLeft
+      // PS:计算的值就小不就大，小数不能四舍五入，应忽略
+      // 左侧间距(padding-left) = 剩余宽度的一半
+      var paddingLeft = parseInt(calcWidth / 2)
+      var marginRight = parseInt(window.getComputedStyle(children[0]).marginRight.replace(/px/g, ''))
+      // 右侧间距(padding-right) = 剩余宽度的一半 - 子元素的marginRight
+      var paddingRight = paddingLeft - marginRight
+      // 设置父元素盒子的padding
+      return {
+        paddingLeft,
+        paddingRight: paddingRight > 0 ? paddingRight : 0 
+      }
+    }
+    $(function() {
+      try {
+        var flexContainer = document.querySelector('.tag-city-nav-main')
+        var padding = getFlexboxPadding(flexContainer)
+        console.log(padding, 'padding');
+        $(flexContainer).css({
+          "padding-left": padding.paddingLeft + 'px',
+          "padding-right": padding.paddingRight + 'px'
+        })
+      } catch (error) {
+        console.log(error)
+      }
+    })
+  </script>
 </body>
 </html>