微信小程序 —— 多个div（多个微信小程序view）横向排列的便捷方法

本文链接：https://blog.youkuaiyun.com/Wu_shuxuan/article/details/78282415

本文介绍了两种在微信小程序中实现多个view横向排列的便捷方法：一是通过设置外层view的display为flex和flex-flow为row；二是利用white-space属性设置为nowrap。这两种方法对于自适应布局非常实用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在写自适应div( web端 )或view（微信端）的布局时，可以用以下俩种方法进行便捷布局：

利用外层div或外层view的display : flex ; flex-flow : row;
利用外层div或外层view的white-space：nowrap;属性

white-space属性值
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的

 标签。 

  nowrap  文本不会换行，文本会在在同一行上继续，直到遇到 
 标签为止。 

  pre-wrap    保留空白符序列，但是正常地进行换行。 

  pre-line    合并空白符序列，但是保留换行符。 

  inherit 规定应该从父元素继承 white-space 属性的值。

这里写图片描述

web端例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display_flex</title>
    <style>
        .all_div{
            width:100%;
            white-space: nowrap;
        }
        .div-item{
            width:100%;
            display: inline-block;
            border:1px solid red;
        }
        /*
        .all_div{
            width:300%;
            display: flex;
            flex-flow: row;
        }
        .div-item{
            width:100%;
            display: inline-block;
            border:1px solid red;
        }
        */
    </style>
</head>
<body>
<div class="all_div">
    <div class="div-item">
        <h1>移动应用开发</h1>
        <div>接入微信开放平台，让你的移动应用支持微信分享、微信收藏和微信支付。</div>
    </div>
    <div class="div-item">
        <h1>移动应用开发</h1>
        <div>接入微信开放平台，让你的移动应用支持微信分享、微信收藏和微信支付。</div>
    </div>
    <div class="div-item">
        <h1>移动应用开发</h1>
        <div>接入微信开放平台，让你的移动应用支持微信分享、微信收藏和微信支付。</div>
    </div>
</div>
</body>
</html>

小程序端例子：

-wxml
 <scroll-view class="free-verticalScroll" scroll-y="true" scroll-height-animation  bindscrolltoupper="Scrolltoupper" bindscrolltolower="Scrolltolower"  bindscroll="scrolltolower" style="height:200rpx;">
      <view id="free_verticalScroll_item1" class="free-verticalScroll-item">
        <view class="h1">移动应用开发</view>
        <view class="fontSize35 text-center">接入微信开放平台，让你的移动应用支持微信分享、微信收藏和微信支付。</view>
      </view>
      <view id="free_verticalScroll_item2" class="free-verticalScroll-item">
        <view class="h1">网站应用开发</view>
        <view class="fontSize35 text-center">接入微信开放平台，让你的网站支持使用微信帐号来登录</view>
      </view>
      <view id="free_verticalScroll_item3" class="free-verticalScroll-item">
        <view class="h1">公众帐号开发</view>
        <view class="fontSize35 text-center">接入微信开放平台公众帐号开发，为亿万微信用户提供轻便的服务。</view>
      </view>
    </scroll-view>

-wxss
.free-horizontalScroll{
  white-space: nowrap;
}
.free-horizontalScroll-item{
  width:100%;
  display: inline-block;
  white-space: pre-wrap;
}