2017.11.13 flex 布局相关问题

一、今日任务：城市体验平台小程序的开发（由于数据还未完善，今天主要是 UI 布局的开发）

二、所遇问题

1. flex 布局问题：

html：

<view class="flex-space-container city-info">

　　<navigator class="info" wx:for="{{ image }}" wx:key="{{ index }}" url="../list/list?id={{}}">

　　　　<image class="info-img" src="{{ item.src }}" />

　　　　<view class="info-mask"></view>

　　　　<view class="flex-column-container info-title">

　　　　　　<text class="cn-title">{{ cnTitle }}</text>

　　　　　　<text class="en-title">{{ enTitle }}</text>

　　　　</view>

　　</navigator>

</view>

 

css：

.city-info {

　　flex-flow: row wrap;

　　margin-top: 38rpx;

　　margin-right: 26rpx;

　　margin-left: 36rpx;

}

.info {

　　position: relative;

　　margin: 0 14rpx 30rpx;

}

 

.info-img {

　　display: flex;

　　max-width: 314rpx;

　　height: 460rpx;

}

 

我想要达到的目的： 每行2张图片，每张图片最大宽度为 314rpx，即当手机屏幕较小时，如 iphone5，图片可以相应的压缩宽度，但依然是每行2张图片。但是，这段代码并不能满足压缩宽度这个要求，即 display：flex 是失效的。它实现的效果是：每张图片宽度为 314rpx，每行1张图片。（image 中只有 src 属性）

 

解决方法：

<view class="flex-space-container city-info">

　　<image style="margin-left: 15rpx; margin-right: 15rpx; max-width: 314rpx;" wx:for="{{image}}" wx:key="{{index}}" src="{{item.src}}"/>

</view>

未找到原因。