收藏
回答

关于flex子元素布局问题,如何让最后一行是左对齐

问题模块
API和组件


<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;



最后一次编辑于  2017-09-04  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

2 个回答

  • Michael
    Michael
    2017-09-04

    justify-content: flex-start

    2017-09-04
    赞同
    回复
  • 灯火阑珊
    灯火阑珊
    2017-09-04

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

    2017-09-04
    赞同
    回复