微信小程序中justify-content: flex-end 失效

最新推荐文章于 2025-05-19 13:47:37 发布

原创最新推荐文章于 2025-05-19 13:47:37 发布 · 6.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序中justify-content失效 #justify-content失效 #flex-end失效

移动端与服务端专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个关于在Flex布局中，按钮无法按预期对齐到右侧的问题及解决方案。通过在每个按钮外包裹一层view元素，成功实现了按钮的正确对齐。

不正确的效果是这样的：

页面wxml代码如下：

<scroll-view class="hot-box" scroll-y="true">
      <view class="orderDetails" wx:for="{{order}}" wx:key=" ">

        ........省略部分代码......
        ........省略部分代码......
        ........省略部分代码......

        <view class="productBtn">
          <button class="more" hover-class="hover" bindtap="">删除订单</button>
          <button class="more" wx:if="{{item.isPay===0}}" hover-class="hover" bindtap="">取消订单</button>
          <button class="more" wx:if="{{item.isPay===0}}" hover-class="hover-pay" bindtap="">付款</button>
        </view>
      </view>

    </scroll-view>

wxss代码如下：

.productBtn {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-bottom: 25rpx;
  margin-top: 30rpx;
  justify-content: flex-end;
  padding: 0;
  height: 70rpx;
}

问题：无论怎么设置 justify-content都不起作用，三个按钮都是均匀分布。

解决方法，修改wxml代码，给每个button外边套一层view：

<scroll-view class="hot-box" scroll-y="true">
      <view class="orderDetails" wx:for="{{order}}" wx:key=" ">
        
        ..........省略部分代码..........
        ..........省略部分代码..........
        ..........省略部分代码..........

        <view class="productBtn">
          <view>
            <button class="more" hover-class="hover" bindtap="">删除订单</button>
          </view>
          <view>
            <button class="more" wx:if="{{item.isPay===0}}" hover-class="hover" bindtap="">取消订单</button>
          </view>
          <view>
            <button class="more" wx:if="{{item.isPay===0}}" hover-class="hover-pay" bindtap="">付款</button>
          </view>
        </view>
      </view>
</scroll-view>

修改后效果如下：