布局问题，不知道如何解决，求大家帮忙
- 需求的场景描述（希望解决的问题）
上面的数据是一个大循环（对象、时节）输出的，然后再嵌套一个循环（儿童、初中生、高中…）输出的。
在布局上，对象的view 跟 儿童的view是同等级的，采用了flex布局，但是出现了问题，就是第二个红框的内容肯定是在“对象”这个view下面另起一行的，没办法移到第一个红框进去，下面的“时节”内容也这样，求大牛帮看看有什么方案解决我有需求不？
下面是相关代码：
<block wx:for="{{words}}" wx:key="key"> <view class="recommend-item"> <view class="item"> <text class="item-title">{{item.key}}</text> </view> <block wx:for="{{item.values}}" wx:key="sub-key"> <view class="sub-item" wx:key="items"> <text>{{item}}</text> </view> </block> </view></block> |
.recommend-item{ display: flex; flex-direction: row; justify-content:space-start; margin-left: 15rpx; margin-bottom: 20rpx; margin-top: 20rpx; margin-right: 15; flex-wrap:wrap;}.item{ width: 120rpx; font-size: 18px; height: 120rpx; text-align: center; border: 1px solid #f6f6f6;}.sub-item{ font-size: 15px; height: 60rpx; width: 120rpx; text-align: center; border: 1px solid #f6f6f6;} |
- 希望提供的能力
4 回复
<view class="item" wx:for="{{words}}" wx:key="{{key}}"> <view class="item-front"> <text class="item-front-text">{{item.key}}</text> </view> <view class="item-behind"> <text class="item-behind-text" wx:for="{{item.values}}" wx:for-item="value" wx:key="{{value}}">{{value}}</text> </view></view> |
.item{ display: flex; flex-direction: row; margin: 0rpx 15rpx;}.item-front { display: flex; flex-direction: column; width: 120rpx;}.item-behind { display: flex; flex: 1; flex-direction: row; flex-wrap: wrap;}.item-front-text { display: flex; justify-content: center; align-items: center; height: 60rpx; font-size: 18px; font-weight: 20px; text-align: center; border: 1px solid #f6f6f6;}.item-behind-text { display: flex; justify-content: center; align-items: center; height: 60rpx; width: 120rpx; font-size: 15px; font-weight: 15px; text-align: center; border: 1px solid #f6f6f6;} |
强力驱动