收藏
回答

如何用wxss,把flex里的image位置右对齐?

这是wxml:

<view class="container">
  <view class="item1">
    {{'内容一'}}
    <view class="item2">内容二</view>
    <image class="item3" src="/assets/common/more.svg" />
  </view>
</view>

这是wxss:

.container {
  padding: 60rpx 50rpx 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: lightpink;
}

.item1 {
  color: #000;
  font-size: 54rpx;
  font-weight: 500;
  align-self: flex-start;
  width: 100%;
  position: relative;
  background-color: rgb(196, 130, 130);
}

.item2 {
  display: inline-block;
  box-sizing: border-box;
  color: #fff;
  padding: 6rpx 14rpx;
  font-size: 20rpx;
  font-weight: normal;
  border-radius: 20rpx;
  text-align: center;
  line-height: initial;
  margin-left: 16rpx;
}

.item3 {
  transform: rotate(90deg);
  width: 37rpx;
  height: 37rpx;
}

目前效果如图:

想要的效果是把item3右对齐,而item1和item2不变,如图:

请问我该如何实现呢?谢谢!

回答关注问题邀请回答
收藏

2 个回答

  • 小黎
    小黎
    2022-11-18
    <view class="container">
      <view class="item1">
        <view style="display: flex;align-items: center;">
          {{'内容一'}}
          <view class="item2">内容二</view>
        </view>
        <image class="item3" src="/assets/common/more.svg" />
      </view>
    </view>
    .item1 {
      color#000;
      display: flex;
      justify-content: space-between;
      font-size54rpx;
      font-weight500;
      align-items: center;
      width100%;
      position: relative;
      background-color: rgb(196130130);
    }
    
    2022-11-18
    有用 1
    回复
  • 俪粒吖~
    俪粒吖~
    2022-11-18

    <view class="container">

      <view class="item1" style="display: flex;justify-content: space-between;">

      <view class="" style="display: flex;">

      {{'内容一'}}

        <view class="item2">内容二</view>

      </view>

       

        <image class="item3" src="/assets/common/more.svg" />

      </view>

    </view>

    2022-11-18
    有用 1
    回复 1
    • 俪粒吖~
      俪粒吖~
      2022-11-18
      加个view,改个结构
      2022-11-18
      回复
登录 后发表内容