关于flex子元素布局问题,如何让最后一行是左对齐
发布于 7 年前 作者 fengna 18654 次浏览 来自 问答

<view class=“page”>  

  <view class=“section”>

  <view class=“book_items”>

      <view class=“book_attr”>请选择到店时间</view>

      <picker mode=“date” value="{{bookDate}}" start=“2015-09-01” end=“2017-09-01” bindchange=“bindDateChange”>

      <view class=“book_picker_view”>

        {{bookDate}}

      </view>

      </picker>

    </view>

    <view class=“book_items”>

      <view class=“book_attr”>请选择预约日期</view>

      <view class=“book_picker_view” bindtap=“showModal”>

        {{bookTime}}

      </view>

    </view>

    </view>

    <view class=“container-column buydes-dialog-container” wx:if="{{showModalStatus}}">  

        <view class=“buydes-dialog-container-top” bindtap=“hideModal”></view>  

        <view animation="{{animationData}}" class=“container-column buydes-dialog-container-bottom”>

         <view class=“time_title”>请选择预约时间</view>

         <view class=“times_block”>

           <view bindtap=“hideModal” class=“buydes-dialog-container-bottom-item” wx:for="{{timesData}}" wx:for-index=“index” wx:key=“key” wx:for-item=“item”>  

             {{item}}

          </view>  

          </view>

        </view>  

    </view>  

</view>  

--------------------wxss------------------------------

.times_block{

  display: flex;

  flex-wrap:wrap;

  padding: 10rpx 20rpx ;

  justify-content: center;

}

.times_block{

  display: flex;

  flex-wrap:wrap;

  padding: 10rpx 20rpx ;

  justify-content: center;

}

.buydes-dialog-container-bottom-item{

  display: flex;

  font-size: 30rpx;  

  padding:12rpx;    

  justify-content: center;  

  border: 10rpx solid #eeeeee;  

  margin: 10rpx 20rpx;

  border-radius: 10rpx;

  text-align: center;

  align-items: flex-start;

2 回复

这样子的。不过左右边距不一样了,整体不是剧中

justify-content: flex-start

回到顶部