cover-view 布局用flex ，flex-direction: column 不生效！
wxml
<map style=‘width:750rpx;’>
<cover-view class=‘w1’>
<cover-view class=‘w2’>
1
</cover-view>
<cover-view class=‘w2’>
2
</cover-view>
<cover-view class=‘w2’>
3
</cover-view>
<cover-view class=‘w2’>
4
</cover-view>
<cover-view class=‘w2’>
5
</cover-view>
<cover-view class=‘w2’>
6
</cover-view>
</cover-view>
</map>
wxss
.w1{
width: 750rpx;
height: 300px;
background-color: wheat;
display: flex;
display: -webkit-flex;
flex-direction: column;
}
.w2{
width: 750rpx;
height: 50px;
background-color: yellow;
border-bottom: 2px red solid;
}
效果：
wxml
<map id=“map”
latitude="{{currentLocation.latitude}}"
longitude="{{currentLocation.longitude}}"
scale="{{scale}}"
bindregionchange=“bindregionchange”
polyline="{{polyline}}"
markers="{{markers}}"
controls="{{controls}}"
bindmarkertap=“bindmarkertap”
bindcontroltap=“bindcontroltap”
show-location>
<cover-view class=“container”>
<cover-view class=“top-block flex-column”>
<!-- 搜索栏 开始 -->
<cover-view class=“search-block”>
<cover-view class=“flex-row flex-row-space-between”>
<cover-view class=“float-button”><cover-image src="{{’…/…/assets/images/icons/icon-mine.png’}}"></cover-image></cover-view>
<cover-view class=“search-wrapper” url="/pages/search/search">
<cover-image src="{{’…/…/assets/images/icons/icon-search.png’}}"></cover-image>
<cover-view>搜索</cover-view>
</cover-view>
<cover-view class=“float-button”><cover-image src="{{’…/…/assets/images/icons/icon-filter.png’}}"></cover-image></cover-view>
</cover-view>
</cover-view>
<!-- 搜索栏 结束 -->
<!-- 消息栏 开始 -->
<cover-view class=“message-block”>
<cover-view class=“flex-row flex-row-space-between”>
<cover-view class=“float-button”><cover-image src="{{’…/…/assets/images/icons/icon-message.png’}}"></cover-image></cover-view>
</cover-view>
</cover-view>
<!-- 搜索栏 结束 -->
</cover-view>
</cover-view>
</map>
wxss
/**
* 纵向从上往下排列（顶对齐）
* <div class=“fx-column”></div>
*/
.flex-column {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; }
/**
* 向从左到右排列（左对齐）
* <div class=“flex-row”></div>
*/
.flex-row {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row; }
.flex-row-space-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between; }
map {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1; }
cover-view {
overflow: visible;
line-height: normal;
white-space: inherit;
pointer-events: auto; }
.container {
position: relative;
width: 100%;
height: auto;
display: flex;
justify-content: space-between; }
.container .float-button {
z-index: 1000;
background: #FFFFFF;
box-shadow: 0 4px 12px 0 rgba(31, 51, 153, 0.2);
width: 72rpx;
height: 72rpx;
line-height: 72rpx;
text-align: center;
vertical-align: center;
font-size: 16px;
border-radius: 60rpx; }
.container .float-button cover-image {
margin: 10rpx;
width: 52rpx;
height: 52rpx; }
.container .top-block {
justify-content: flex-start; }
.container .top-block .search-block {
width: 100%;
padding: 17rpx 24rpx;
display: block; }
.container .top-block .search-block .search-wrapper {
z-index: 1000;
display: block;
text-align: center;
width: 480rpx;
height: 72rpx;
line-height: 62rpx;
background: #FFFFFF;
box-shadow: 0 4rpx 12rpx 0 rgba(31, 51, 153, 0.2);
border-radius: 60rpx; }
.container .top-block .search-block .search-wrapper cover-image {
height: 40rpx;
width: 40rpx;
font-size: 28rpx;
vertical-align: middle;
margin: 0 5rpx; }
.container .top-block .search-block .search-wrapper .cover-image {
display: inline-block;
height: 24rpx;
width: 24rpx;
font-size: 14px;
color: #B4BBE1;
margin: 0 5rpx; }
.container .top-block .search-block .search-wrapper text {
vertical-align: middle;
margin: 0 5rpx;
font-size: 28rpx;
color: #B4BBE1;
line-height: 29rpx; }
.container .top-block .message-block {
align-self: flex-start;
z-index: 1000;
padding: 17rpx 24rpx;
display: block; }
.container .bottom-block {
justify-content: flex-start; }
.container .bottom-block .refresh-block {
align-self: flex-start;
padding: 17rpx 24rpx;
display: block; }
.container .bottom-block .ask-block {
padding: 17rpx 24rpx; }
.container .bottom-block .ask-block .ask-button {
z-index: 1000;
width: 240rpx;
height: 94rpx;
background: #3F5FFF;
box-shadow: 0 12px 24px 0 rgba(0, 25, 153, 0.2);
border-radius: 70px;
text-align: center;
vertical-align: middle;
line-height: 94rpx; }
.container .bottom-block .ask-block .ask-button cover-image {
width: 45rpx;
height: 45rpx; }
.container .bottom-block .ask-block .ask-button text, .container .bottom-block .ask-block .ask-button .text {
font-size: 32rpx;
color: #ffffff;
line-height: 40rpx; }
.container .bottom-block .ask-block .reward-button {
z-index: 1000;
width: 88rpx;
height: 88rpx;
background-size: cover;
text-align: center; }
.container .bottom-block .ask-block .reward-button text, .container .bottom-block .ask-block .reward-button .text {
width: 20rpx;
height: 60rpx;
font-size: 20rpx;
color: #FFFFFF;
line-height: 20rpx; }
强力驱动