收藏
回答

cover-view 的flex布局有问题!!!!!

问题模块
API和组件

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;

}


效果:


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

17 个回答

  • Special
    Special
    2017-11-24

    这个是开发者工具上的截图?

    2017-11-24
    赞同
    回复 3
    • 长伴左手
      长伴左手
      2018-06-26

      我也遇到类似的问题, 这是开发者工具上面的, 这是真机调试。


      这是CSS代码

      2018-06-26
      回复
    • 长伴左手
      长伴左手
      2018-06-26

      我也遇到类似的问题, 这是开发者工具上面的, 这是真机调试。


      这是CSS代码

      2018-06-26
      回复
    • 长伴左手
      长伴左手
      2018-06-26

      <!--pages/push/push.wxml-->

      <view style="width:100%;height: 100%; background-color: black;">

      <view style="width:100%;height:100%;">

      <live-pusher

      style="width:100%; height: 100%;"

      id="camera-push"

      mode="{{mode}}"

      autopush

      orientation="{{orientation}}"

      beauty="{{beauty}}"

      whiteness="{{whiteness}}"

      muted="{{muted}}"

      waiting-image="https://mc.qcloudimg.com/static/img/daeed8616ac5df256c0591c22a65c4d3/pause_publish.jpg"

      background-mute="{{backgroundMute}}"

      url="{{pushUrl}}"

      enable-camera="{{enableCamera}}"

      debug="{{debug}}"

      hidden="{{hide}}"

      bindstatechange="onPushEvent">

      <!-- 顶部按钮 -->

      <cover-view class="hg-top">

      <cover-image src='../../utils/images/v_1.png'></cover-image>

      <cover-image src='../../utils/images/v_2.png'></cover-image>

      <cover-image src='../../utils/images/v_3.png'></cover-image>

      </cover-view>

      <!-- 水平方向的按钮 -->

      <cover-view wx:if="{{!playing || playing}}" style="width:100%; height: 120px; position:absolute;bottom:30px;" >

      <cover-view class='bottom_box'>      

      <cover-image class="bottom_button" src="../../utils/images/head.png" bindtap='onPushClick'></cover-image>

      </cover-view>

      <cover-view class='flex-align-justify pl-20 pr-20 mt-20'>

      <cover-view>

      <cover-view class='hgSpan'>00</cover-view> <cover-view class='hgSpan hg-br'>:</cover-view>  <cover-view class='hgSpan'>02</cover-view> <cover-view class='hgSpan hg-br'>:</cover-view><cover-view class='hgSpan'>54</cover-view>

      </cover-view>

      <cover-view class='btn hg-btn pd-10 flex-align' bindtap='endLive'><cover-image src='../../utils/images/end.png'></cover-image> 结束直播</cover-view>

      </cover-view>

      <!-- <cover-view class='bottom_box'>      

             <cover-image class="bottom_button" src="../Resources/camera.png" bindtap='onSwitchCameraClick'></cover-image>

             <cover-view class='bottom_text'>翻转</cover-view>

           </cover-view>

           <cover-view class='bottom_box'>      

             <cover-image class="bottom_button" src="../Resources/{{beauty == 0 ? 'beauty-dis':'beauty'}}.png" bindtap='onBeautyClick'></cover-image>

             <cover-view class='bottom_text'>美颜</cover-view>

           </cover-view>

           <cover-view class='bottom_box'>      

             <cover-image class="bottom_button" src="../Resources/{{mode == 'HD'? 'HD':mode == 'FHD'?'super':'SD'}}.png" bindtap='onSwitchMode'></cover-image>

             <cover-view class='bottom_text'>{{mode == 'HD'? '高清':mode == 'FHD'?'超清':'标清'}}</cover-view>

           </cover-view>

           <cover-view class='bottom_box'>      

             <cover-image class="bottom_button" src="../Resources/{{muted?'mic-dis':'mic'}}.png" bindtap='onMuteClick'></cover-image>

             <cover-view class='bottom_text'>声音</cover-view>

           </cover-view>

           <cover-view class='bottom_box'>      

             <cover-image class="bottom_button" src="../Resources/{{enableCamera?'off':'camera-dis'}}.png" bindtap='onEnableCameraClick'></cover-image>

             <cover-view class='bottom_text'>摄像头</cover-view>

           </cover-view>

           <cover-view class='bottom_box'>      

             <cover-image class="bottom_button" src="../Resources/{{orientation == 'vertical'?'portrait':'landscape'}}.png"  bindtap='onOrientationClick'></cover-image>

             <cover-view class='bottom_text'>{{orientation == 'vertical'?'竖屏':'横屏'}}</cover-view>

           </cover-view> -->

      </cover-view>

      </live-pusher>

      </view>

      </view>


      这是wxml代码

      2018-06-26
      回复
  • Special
    Special
    2017-11-24


    直接复制代码后在开发者工具上的效果,是否是期望的结果?

    2017-11-24
    赞同
    回复
  • Special
    Special
    2017-11-24

    目测有其它的 css 影响了你这边的 demo

    2017-11-24
    赞同
    回复
  • 马仔
    马仔
    2017-11-27

    好的,谢谢!

    2017-11-27
    赞同
    回复
  • 暴风雪💤👺😈👽
    暴风雪💤👺😈👽
    2017-12-14

    还是有问题,在真机上flex是OK的,但是在开发工具上有问题

    2017-12-14
    赞同
    回复
  • 马仔
    马仔
    2017-12-14

    没问题吧?你上代码看看!!

    2017-12-14
    赞同
    回复
  • 暴风雪💤👺😈👽
    暴风雪💤👺😈👽
    2017-12-14

    你那里没问题吗?

    看我的这个帖子

    https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=44648cb3ee0e3d8eb955de296c384c86&token=15940334&lang=zh_CN


    2017-12-14
    赞同
    回复
  • 马仔
    马仔
    2017-12-14

    能直接上代码么?

    2017-12-14
    赞同
    回复
  • 暴风雪💤👺😈👽
    暴风雪💤👺😈👽
    2017-12-14

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


    2017-12-14
    赞同
    回复
  • 马仔
    马仔
    2017-12-14

    ,我直接拷你代码的,你自己看,有什么问题!!


    2017-12-14
    赞同
    回复