草庐IT

微信小程序-flex布局：垂直、水平方向-自动填充满剩余空间

l_yilan 2023-11-21 原文

在微信小程序项目中经常需要将水平或垂直方向分成两大部分，一部分内容宽度或高度固定，剩余的一部分需填充满剩余空间。那么，该怎么快速解决这类布局？
效果图如下：

垂直方向：

水平方向：

我个人比较喜欢使用flex布局，面对此类布局，最先想到的也是flex布局。常见的flex布局中，可设置flex:1,相当于设置父盒子display:flex,即伸缩布局，flex为1，是子盒子占了一份，自动放大填满剩余的空间。若还有另一个子盒子也设置flex；1，即这个父盒子被两个子盒子平分，各占一半。若另一个子盒子设置flex:2,也就是父盒子被所有子盒子平分成3份，以此类推。
常见的flex属性值：
1.flex:1,也就是flex-grow:1,也就是上面说的自动放大填充满剩余空间，若有其他子盒子设置flex，则平分。
2.flex:0 0 auto,等同于flex:none,子元素的长度决定它的长度，当整体空间不足时，它也不会缩小，有剩余空间也不放大。相当于它是由子元素固定大小，不放大也不缩小。
3.flex:1 1 auto,等同于flex:auto,由子元素的宽（width）高(height)属性来改变大小。如果和flex:0 0 auto一起使用就是自适应宽度，自动填充剩余空间。

以下为水平和垂直方向例子：
假设页面高度为100%，第一部分的高度为200rpx,那么剩余的部分填充满剩余空间。container2为页面的外层元素，拆分为两个部分，第一部分为red,另一部分为blue。
要想页面高度一开始就是100%，可以在wxss中设置page样式。

page {
  width: 100%;
  height: 100%;
}

1.垂直方向：
wxml完整代码如下：

<view class="container2">
  <view class="fixedWidth">
    <view class="red">1</view>
  </view>
  <view class="autoFullWidth">
    <view class="blue">2</view>
  </view>
</view>

wxss完整代码如下：
注意：
container2需要设置display: flex;flex-direction: column;(column为垂直方向）
剩余空间autoFullWidth需要用定位，
要不然剩余空间就不会自动占满100%，

page {
  width: 100%;
  height: 100%;
}

.container2 {
  width: 100%;
  height: auto;
  min-height: 100%;
  background-color: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* 固定宽度 */
.fixedWidth {
  flex: 0 0 auto;
}

/* 自适应宽度 */
.autoFullWidth {
  flex: 1 1 auto;
  position: relative;
}

.blue {
  background: blue;
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 120rpx;
  color: #fff;
}

.red {
  background: red;
  height: 200rpx;
  font-size: 120rpx;
  color: #fff;
}

2.水平方向
wxml完整代码如下：

<view class="container2">
  <view class="fixedWidth">
    <view class="red">1</view>
  </view>
  <view class="autoFullWidth">
    <view class="blue">2</view>
  </view>
</view>

wxss完整代码如下：
注意：
container2需要设置display: flex;flex-direction: row;(row为水平方向）
剩余空间autoFullWidth需要用定位，
要不然剩余空间就不会自动占满100%，

page {
  width: 100%;
  height: 100%;
}

.container2 {
  width: 100%;
  height: auto;
  min-height: 100%;
  background-color: #fff;
  position: relative;
  display: flex;
  flex-direction: row;
}

/* 固定宽度 */
.fixedWidth {
  flex: 0 0 auto;
}

/* 自适应宽度 */
.autoFullWidth {
  flex: 1 1 auto;
  position: relative;
}

.blue {
  background: blue;
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 120rpx;
  color: #fff;
}

.red {
  background: red;
  width: 200rpx;
  height: 100%;
  font-size: 120rpx;
  color: #fff;
}
充满flexspanclasstoken微信小程序csscss3

有关微信小程序-flex布局：垂直、水平方向-自动填充满剩余空间的更多相关文章

  1. ruby - nanoc 和多种布局 - 2

    是否可以为特定(或所有)项目使用多个布局？例如，我有几个项目，我想对其应用两种不同的布局。一个是绿色的，一个是蓝色的(但是)。我想将它们编译到我的输出目录中的两个不同文件夹中(例如v1和v2)。我一直在玩弄规则和编译block，但我不知道这是怎么回事。因为，每个项目在编译过程中只编译一次，我不能告诉nanoc第一次用layout1编译，第二次用layout2编译。我试过这样的东西，但它导致输出文件损坏。compile'*'doifitem.binary?#don’tfilterbinaryitemselsefilter:erblayout'layout1'layout'layout2'

  2. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说，前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可，但要是匹配的code码比较多或者多个页面用到时，为了便于后期维护，后台就会使用字典表让前端匹配，下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs？{{method(a,b)}}可以看到，上述代码是一个调用方法传值的操作，在vue中很常见，多用于数据之间的转换，但由于微信小程序诸多限制的原因，你并不能优雅的这样操作，可能有人会说，为什么不用if判断实现呢？但是if判断的局限性在于如果存在数据量过大时，大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  3. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  4. 微信小程序开发入门与实战（Behaviors使用） - 2

    @作者:SYFStrive @博客首页:HomePage📜：微信小程序📌：个人社区（欢迎大佬们加入）👉：社区链接🔗📌：觉得文章不错可以点点关注👉：专栏连接🔗💃：感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序（🔥）目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中，用于实现

  5. ruby - 在 Ruby 中，垂直线是什么？ - 2

    1.upto(9){|x|printx}为什么这行不通？{printx|x}}y呢？ 最佳答案 它用于传递给您的block的参数。即在您的示例中，upto将使用1到9中的每个数字调用您的block，当前值可作为x获得。block参数可以有任何名称，就像方法参数一样。例如1.upto(9){|num|putsnum是有效的。就像一个方法的参数一样，一个block也可以有多个参数。例如hash.each_pair{|key,value|puts"#{key}is#{value}"} 关于ru

  6. Ubuntu20.04系统WineHQ7.0安装微信 - 2

    提供3种Ubuntu系统安装微信的方法，在Ubuntu20.04上验证都ok。1.WineHQ7.0安装微信：ubuntu20.04安装最新版微信--可以支持微信最新版，但是适配的不是特别好；比如WeChartOCR.exe报错。2.原生微信安装：linux系统下的微信安装(ubuntu20.04)--微信适配的最好，反应最快，但是微信版本只到2.1.1，版本太老，很多功能都没有。3.深度deepin-wine6安装微信：ubuntu20.04+系统deepin-wine6安装新版微信--综合比较好，当前个人使用此种方法1个月，微信版本3.4；没什么大问题，尚可。一、WineHQ7.0安装微信

  7. 微信小程序订餐系统 - 2

    对传统的餐饮商家来说，小程序很好地解决了餐厅线下线上连接的问题，在引流获客、节约人力、营销宣传、塑造会员体系、改善消费体验等方面都有很大帮助。小程序点餐可以帮助餐饮企业节省一大把人力开支。一个包含扫码点单、菜品管理、优惠券推送、外卖配送的小程序，商家花几万元就能完成开发测试并投入。商家为什么要开通“扫码点餐”1.解决服务员不够用的问题。2.不怕顾客跑单漏单。3.在微信就能管理菜品、查看营业额。4.订单小票显示顾客桌号和已点菜品。5.可在“附近的小程序”找到您的门店。如今餐饮业常用的三种经营模式：1堂食点单模式客人通过小程序堂食点单。商家可以在微信扫码点餐小程序管理后台根据自己店内情况来设置不同

  8. 最新版人脸识别小程序 图片识别 生成二维码签到 地图上选点进行位置签到 计算签到距离 课程会议活动打卡日常考勤 上课签到打卡考勤口令签到 - 2

    技术选型1，前端小程序原生MINA框架cssJavaScriptWxml2，管理后台云开发Cms内容管理系统web网页3，数据后台小程序云开发云函数云开发数据库（基于MongoDB）云存储4，人脸识别算法基于百度智能云实现人脸识别一，用户端效果图预览老规矩我们先来看效果图，如果效果图符合你的需求，就继续往下看，如果不符合你的需求，可以跳过。1-1，登录注册页可以看到登录页有注册入口，注册页如下我们的注册，需要管理员审核，审核通过后才可以正常登录使用小程序1-2，个人中心页登录成功以后，我们会进入个人中心页我们在个人中心页可以注册人脸，因为我们做人脸识别签到，需要先注册人脸才可以进行人脸比对，进

  9. ruby-on-rails - Ruby on Rails 中的水平数据库扩展 - 2

    我有一个RubyonRails应用程序和一个具有以下结构的PostgreSQL数据库:classA只有几个A，而且增长缓慢(比如一个月5个)。每个A有数千个B，每个B有数万个C(因此每个A有数百万个C)。A是独立的，并且永远不会同时需要来自不同A的B和C(即在同一查询中)。我的问题是现在我只有几个A，ActiveRecord查询需要很长时间。当C的表有数千万行时，查询将永远无法进行。我正在考虑水平扩展数据库(即A的一张表，B的一张表和每个A的一张C的表)。但我不知道该怎么做。我猜这是一种分片，但我无法弄清楚如何动态创建数据库表并使用ActiveRecord访问数据(如果该表取决于我正在

  10. 微信小程序切换云环境 - 2

    在开发微信小程序的时候，我们可能需要开发环境和测试环境，或者其他环境，下面是切换环境的方法。首先需要明确的是：前端的页面代码是不区分环境的，环境的区分指的是云函数、云数据库、云存储这些。1、更改云函数的使用云环境这里我们从cloud1更改为test-cloud，这个改完是没有用的，因为在前端代码指定了使用的云环境。cloudfunctions文件和miniprogram文件虽然都在一个目录下，但是这两个没有直接联系。2、在evList.js中添加自己云环境evList.js存储了云环境列表，这里把test-cloud加到这个列表里，需要填写envId和alias，参照cloud1写就行。3、更

随机推荐