uni-app的flex盒模型与布局进阶写法（高手勿进）

2024-02-04 05:18
文章标签 进阶 布局 app 模型 写法 uni flex 高手 勿进

本文主要是介绍uni-app的flex盒模型与布局进阶写法（高手勿进），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

uni-app的flex盒模型与布局进阶写法（高手勿进）

  • 官方文档
  • 盒模型的进阶操作
  • flex布局
  • 总结

官方文档

许多细节不多赘述，细枝末节还是看官方文档
盒模型
flex布局

盒模型的进阶操作

在这里插入图片描述
盒模型其实很简单，主要是对于margin和padding以及border的使用
可以这样去理解，margin向外扩展，padding是向内缩减，border是对边框的操作，content在这里我们不去关注，content将会在下面的flex布局中去讨论。
这个部分讲几个我认为比较有用的写法：

  1. 圆角框
    在这里插入图片描述
<template><view class=""><view class="example_one">这是一个圆角框</view></view>
</template>

.example_one {background-color: #ffff00;width: 100%;height: 300rpx;padding: 25rpx 25rpx; /* 向内压缩空间,否者内容会显示在框外，大家可以试试不写这行代码，内容会怎么样 */border-radius: 25rpx; /* 使四个角都为圆角 */margin: 50rpx auto;/* 居中并使上下编剧各位25rpx */
}
  1. 上圆角背景
    在这里插入图片描述
<template><view class="content"><view >这行可以是搜索栏</view><view class="example_two">这是一个上圆角背景</view></view>
</template>

.content{background-color: #C0C0C0;
}
.example_two{background-color: #FFFFFF;height: 300rpx;padding: 25rpx 25rpx; /* 向内压缩空间,否者内容会显示在框外，大家可以试试不写这行代码，内容会怎么样 */border-radius: 35rpx 35rpx 0 0; /* 使上面两个角为圆角 */margin-top: 50rpx;
}

flex布局

有些小伙伴看了uni-app的flex布局文档后，可能还是比较迷糊，不知道怎么灵活的去写样式，下面将会从易到难的去分析几个样式

  1. 左整右散
    假如现在我们想写这样一个样式
    在这里插入图片描述
  • 首先我们应该分析这个布局，对其进行标号
    在这里插入图片描述
    将其划分为左右两部分（1）（2，3，4），这两部分同级，右边三部分同级
  • 那么下面看代码
<template><view class="content"><view class="left">1</view><view class="right"><view class="l1">2</view><view class="l2">3</view><view class="l3">4</view></view></view>
</template>

<style lang="scss">.content{display: flex;flex-direction: row;background-color: #999999;padding: 30rpx 30rpx;justify-content: space-between;.left{background-color: #FFFFFF;width: 30%;height: 300rpx;}.right{display: flex;flex-direction: column;justify-content: space-between;width: 60%;.l1{background-color: #FFFFFF;width: 100%;height: 90rpx;}.l2{background-color: #FFFFFF;width: 100%;height: 90rpx;}.l3{background-color: #FFFFFF;width: 100%;height: 90rpx;}}}
</style>

效果图：
在这里插入图片描述

  1. 上整下散
    假如现在我们想要做这样一个样式
    在这里插入图片描述
  • 那么我们将其划分为上下两块（1）（1，2，3），1和（2，3，4）是同级的，2，3，4是同级的
  • 代码和上面的大同小异，只做了部分修改，代码如下：
<template><view class="content"><view class="left">1</view><view class="right"><view class="l1">2</view><view class="l2">3</view><view class="l3">4</view></view></view>
</template>

<style lang="scss">.content{display: flex;flex-direction: column;background-color: #999999;padding: 30rpx 30rpx;justify-content: space-between;align-items: center;height: 300rpx;.left{background-color: #FFFFFF;width: 90%;height: 100rpx;}.right{display: flex;flex-direction: row;justify-content: space-between;width: 90%;.l1{background-color: #FFFFFF;width: 25%;height: 150rpx;}.l2{background-color: #FFFFFF;width: 25%;height: 150rpx;}.l3{background-color: #FFFFFF;width: 25%;height: 150rpx;}}}
</style>

在这里插入图片描述

  1. 实战——帖子
    现在我们想做这样一个帖子的样式：
    在这里插入图片描述
    按照上面的步骤来：
  • 划分元素块
    在这里插入图片描述
    这样就一目了然了，到底哪些是一级的，哪些在下面一级，首先应该把框架用代码敲出来
<view class="tiezi"><view class="l1"><image src="" mode="aspectFit" class="headicon"></image><view class="namedate"><text class="name"></text><text class="date"></text></view></view><view class="l2"></view><view class="l3"><view v-for="(item1,index) in item.pic" :key="index"></view></view><view class="l4"><view class="zan"><view class=""></view></view><text style="color: #a6a6a6;">|</text><view class="comment"><view class=""></view></view><text style="color: #a6a6a6;">|</text><view class="eye"><view class=""></view></view></view></view>
</view>
  • 然后再向框架里面填充元素并写样式，代码如下，其中图片的资源大家可以自行替换看效果，我就不放上去了
<view class="tiezi"><view class="l1"><image v-if="item.headicon" :src="item.headicon" mode="aspectFit" class="headicon"></image><view class="namedate"><text class="name">{{item.name}}</text><text class="date">{{item.date}}</text></view></view><view class="l2"><text>{{item.cotent}}</text></view><view class="l3"><view v-for="(item1,index) in item.pic" :key="index"><image v-if="item1" :src="item1" mode="aspectFill" class="contentpic"></image></view></view><view class="l4"><view class="zan"><image src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktaGFuZC10aHVtYnMtdXAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTguODY0LjA0NkM3LjkwOC0uMTkzIDcuMDIuNTMgNi45NTYgMS40NjZjLS4wNzIgMS4wNTEtLjIzIDIuMDE2LS40MjggMi41OS0uMTI1LjM2LS40NzkgMS4wMTMtMS4wNCAxLjYzOS0uNTU3LjYyMy0xLjI4MiAxLjE3OC0yLjEzMSAxLjQxQzIuNjg1IDcuMjg4IDIgNy44NyAyIDguNzJ2NC4wMDFjMCAuODQ1LjY4MiAxLjQ2NCAxLjQ0OCAxLjU0NSAxLjA3LjExNCAxLjU2NC40MTUgMi4wNjguNzIzbC4wNDguMDNjLjI3Mi4xNjUuNTc4LjM0OC45Ny40ODQuMzk3LjEzNi44NjEuMjE3IDEuNDY2LjIxN2gzLjVjLjkzNyAwIDEuNTk5LS40NzcgMS45MzQtMS4wNjRhMS44NiAxLjg2IDAgMCAwIC4yNTQtLjkxMmMwLS4xNTItLjAyMy0uMzEyLS4wNzctLjQ2NC4yMDEtLjI2My4zOC0uNTc4LjQ4OC0uOTAxLjExLS4zMy4xNzItLjc2Mi4wMDQtMS4xNDkuMDY5LS4xMy4xMi0uMjY5LjE1OS0uNDAzLjA3Ny0uMjcuMTEzLS41NjguMTEzLS44NTcgMC0uMjg4LS4wMzYtLjU4NS0uMTEzLS44NTZhMi4xNDQgMi4xNDQgMCAwIDAtLjEzOC0uMzYyIDEuOSAxLjkgMCAwIDAgLjIzNC0xLjczNGMtLjIwNi0uNTkyLS42ODItMS4xLTEuMi0xLjI3Mi0uODQ3LS4yODItMS44MDMtLjI3Ni0yLjUxNi0uMjExYTkuODQgOS44NCAwIDAgMC0uNDQzLjA1IDkuMzY1IDkuMzY1IDAgMCAwLS4wNjItNC41MDlBMS4zOCAxLjM4IDAgMCAwIDkuMTI1LjExMUw4Ljg2NC4wNDZ6TTExLjUgMTQuNzIxSDhjLS41MSAwLS44NjMtLjA2OS0xLjE0LS4xNjQtLjI4MS0uMDk3LS41MDYtLjIyOC0uNzc2LS4zOTNsLS4wNC0uMDI0Yy0uNTU1LS4zMzktMS4xOTgtLjczMS0yLjQ5LS44NjgtLjMzMy0uMDM2LS41NTQtLjI5LS41NTQtLjU1VjguNzJjMC0uMjU0LjIyNi0uNTQzLjYyLS42NSAxLjA5NS0uMyAxLjk3Ny0uOTk2IDIuNjE0LTEuNzA4LjYzNS0uNzEgMS4wNjQtMS40NzUgMS4yMzgtMS45NzguMjQzLS43LjQwNy0xLjc2OC40ODItMi44NS4wMjUtLjM2Mi4zNi0uNTk0LjY2Ny0uNTE4bC4yNjIuMDY2Yy4xNi4wNC4yNTguMTQzLjI4OC4yNTVhOC4zNCA4LjM0IDAgMCAxLS4xNDUgNC43MjUuNS41IDAgMCAwIC41OTUuNjQ0bC4wMDMtLjAwMS4wMTQtLjAwMy4wNTgtLjAxNGE4LjkwOCA4LjkwOCAwIDAgMSAxLjAzNi0uMTU3Yy42NjMtLjA2IDEuNDU3LS4wNTQgMi4xMS4xNjQuMTc1LjA1OC40NS4zLjU3LjY1LjEwNy4zMDguMDg3LjY3LS4yNjYgMS4wMjJsLS4zNTMuMzUzLjM1My4zNTRjLjA0My4wNDMuMTA1LjE0MS4xNTQuMzE1LjA0OC4xNjcuMDc1LjM3LjA3NS41ODEgMCAuMjEyLS4wMjcuNDE0LS4wNzUuNTgyLS4wNS4xNzQtLjExMS4yNzItLjE1NC4zMTVsLS4zNTMuMzUzLjM1My4zNTRjLjA0Ny4wNDcuMTA5LjE3Ny4wMDUuNDg4YTIuMjI0IDIuMjI0IDAgMCAxLS41MDUuODA1bC0uMzUzLjM1My4zNTMuMzU0Yy4wMDYuMDA1LjA0MS4wNS4wNDEuMTdhLjg2Ni44NjYgMCAwIDEtLjEyMS40MTZjLS4xNjUuMjg4LS41MDMuNTYtMS4wNjYuNTZ6Ii8+PC9zdmc+"mode="" class="icon" @click="zan(zanicon)"></image><view class="">{{item.zan}}</view></view><text style="color: #a6a6a6;">|</text><view class="comment"><imagesrc="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hhdC1zcXVhcmUtZG90cyIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJNMTQgMWExIDEgMCAwIDEgMSAxdjhhMSAxIDAgMCAxLTEgMWgtMi41YTIgMiAwIDAgMC0xLjYuOEw4IDE0LjMzMyA2LjEgMTEuOGEyIDIgMCAwIDAtMS42LS44SDJhMSAxIDAgMCAxLTEtMVYyYTEgMSAwIDAgMSAxLTFoMTJ6TTIgMGEyIDIgMCAwIDAtMiAydjhhMiAyIDAgMCAwIDIgMmgyLjVhMSAxIDAgMCAxIC44LjRsMS45IDIuNTMzYTEgMSAwIDAgMCAxLjYgMGwxLjktMi41MzNhMSAxIDAgMCAxIC44LS40SDE0YTIgMiAwIDAgMCAyLTJWMmEyIDIgMCAwIDAtMi0ySDJ6Ii8+PHBhdGggZD0iTTUgNmExIDEgMCAxIDEtMiAwIDEgMSAwIDAgMSAyIDB6bTQgMGExIDEgMCAxIDEtMiAwIDEgMSAwIDAgMSAyIDB6bTQgMGExIDEgMCAxIDEtMiAwIDEgMSAwIDAgMSAyIDB6Ii8+PC9zdmc+"mode="" class="icon"></image><view class="">{{item.comment}}</view></view><text style="color: #a6a6a6;">|</text><view class="eye"><imagesrc="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktZXllIiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxwYXRoIGQ9Ik0xNiA4cy0zLTUuNS04LTUuNVMwIDggMCA4czMgNS41IDggNS41UzE2IDggMTYgOHpNMS4xNzMgOGExMy4xMzMgMTMuMTMzIDAgMCAxIDEuNjYtMi4wNDNDNC4xMiA0LjY2OCA1Ljg4IDMuNSA4IDMuNWMyLjEyIDAgMy44NzkgMS4xNjggNS4xNjggMi40NTdBMTMuMTMzIDEzLjEzMyAwIDAgMSAxNC44MjggOGMtLjA1OC4wODctLjEyMi4xODMtLjE5NS4yODgtLjMzNS40OC0uODMgMS4xMi0xLjQ2NSAxLjc1NUMxMS44NzkgMTEuMzMyIDEwLjExOSAxMi41IDggMTIuNWMtMi4xMiAwLTMuODc5LTEuMTY4LTUuMTY4LTIuNDU3QTEzLjEzNCAxMy4xMzQgMCAwIDEgMS4xNzIgOHoiLz48cGF0aCBkPSJNOCA1LjVhMi41IDIuNSAwIDEgMCAwIDUgMi41IDIuNSAwIDAgMCAwLTV6TTQuNSA4YTMuNSAzLjUgMCAxIDEgNyAwIDMuNSAzLjUgMCAwIDEtNyAweiIvPjwvc3ZnPg=="mode="" class="icon"></image><view class="">{{item.eye}}</view></view></view>
</view>

<style lang="scss">.tiezi {padding: 20rpx 26rpx;background-color: #FFFFFF;margin-bottom: 20rpx;margin-top: 20rpx;display: flex;flex-direction: column;.l1 {display: flex;flex-direction: row;gap: 15rpx;.headicon {width: 80rpx;height: 80rpx;border-radius: 50%;border: 1px solid #FFFFFF;}.namedate {display: flex;flex-direction: column;.name {font-size: 35rpx;font-weight: bold;}.date {font-size: 28rpx;color: #b0b0b0;}}}.l2 {margin-top: 20rpx;}.l3 {display: flex;flex-direction: row;flex-wrap: wrap;gap: 15rpx;margin-top: 15rpx;.contentpic {height: 200rpx;width: 200rpx;}}.l4 {display: flex;flex-direction: row;justify-content: space-between;padding: 0 70rpx;margin-top: 15rpx;.zan {gap: 10rpx;display: flex;flex-direction: row;}.comment{gap: 10rpx;display: flex;flex-direction: row;}.eye{gap: 10rpx;display: flex;flex-direction: row;}}
}
.icon {width: 35rpx;height: 35rpx;margin-top: 4rpx;
}
</style>
  1. 实战——进入自习室卡片样式
    在这里插入图片描述
  • 划分样式
    在这里插入图片描述
  • 上代码
<view v-for="(item,index) in cloudroom" :key="index" class="container"><view class="l1">{{item.name}}</view><view class="l2"><view v-for="(item1,index) in cloudroom[index].sign" :key="index" class="sign">{{item1}}</view></view><view class="l3"><view v-for="(item2,index) in cloudroom[index].headicon" :key="index" class="headlist"><image v-if="item2":src="item2" mode="aspectFit" class="headicon"></image></view><view class="peoplenum"><!-- <image src="" mode="" class="numicon"></image> --><text class="numtext">{{item.peoplenum}}人自习中</text></view></view>
</view>

<style lang="scss">.container{padding: 50rpx 50rpx;border-radius: 25rpx 25rpx 25rpx 25rpx;background-color: #FFFFFF;margin-bottom: 40rpx;margin-top: 40rpx;display: flex;flex-direction: column;.l1 {font-size: 40rpx;font-weight: bold;}.l2{margin-top: 20rpx;display: flex;flex-direction: row;gap: 15rpx;.sign{font-size: 26rpx;border: 1rpx solid #e6e6e6;border-radius: 50rpx 50rpx 50rpx 50rpx;background-color: #e6e6e6;}}.l3{margin-top: 20rpx;display: flex;flex-direction: row;.headicon{width: 80rpx;height: 80rpx;border-radius: 50%;border: 1px solid #FFFFFF;margin-left: -10rpx;}.peoplenum{display: flex;flex-direction: column;font-size: 26rpx;color: #ababab;margin-top: 40rpx;margin-left: 200rpx;}}}
</style>

总结

以上就是盒模型与flex布局的进阶写法了，要点就是首先要划分出各个级别的元素，然后要注意的是image和view都是块级元素，是同一级别的

对您有用的话记得给个三连哟~

这篇关于uni-app的flex盒模型与布局进阶写法（高手勿进）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/676454。

相关文章

HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
大模型研发全揭秘：客服工单数据标注的完整攻略

大模型研发全揭秘：客服工单数据标注的完整攻略

在人工智能（AI）领域，数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者，掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中，工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注，不仅能够帮助提升客服自动化系统的智能化水平，还能优化客户服务流程，提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行
阅读更多...
Java进阶13讲__第12讲_1/2

Java进阶13讲__第12讲_1/2

多线程、线程池 1.  线程概念 1.1  什么是线程 1.2  线程的好处 2.   创建线程的三种方式 注意事项 2.1  继承Thread类 2.1.1 认识  2.1.2  编码实现  package cn.hdc.oop10.Thread;import org.slf4j.Logger;import org.slf4j.LoggerFactory
阅读更多...
Andrej Karpathy最新采访：认知核心模型10亿参数就够了，AI会打破教育不公的僵局

Andrej Karpathy最新采访：认知核心模型10亿参数就够了，AI会打破教育不公的僵局

夕小瑶科技说 原创  作者 | 海野 AI圈子的红人，AI大神Andrej Karpathy，曾是OpenAI联合创始人之一，特斯拉AI总监。上一次的动态是官宣创办一家名为 Eureka Labs 的人工智能+教育公司 ，宣布将长期致力于AI原生教育。 近日，Andrej Karpathy接受了No Priors（投资博客）的采访，与硅谷知名投资人 Sara Guo 和 Elad G
阅读更多...
Retrieval-based-Voice-Conversion-WebUI模型构建指南

Retrieval-based-Voice-Conversion-WebUI模型构建指南

一、模型介绍 Retrieval-based-Voice-Conversion-WebUI（简称 RVC）模型是一个基于 VITS（Variational Inference with adversarial learning for end-to-end Text-to-Speech）的简单易用的语音转换框架。 具有以下特点 简单易用：RVC 模型通过简单易用的网页界面，使得用户无需深入了
阅读更多...
透彻！驯服大型语言模型（LLMs）的五种方法，及具体方法选择思路

透彻！驯服大型语言模型（LLMs）的五种方法，及具体方法选择思路

引言 随着时间的发展，大型语言模型不再停留在演示阶段而是逐步面向生产系统的应用，随着人们期望的不断增加，目标也发生了巨大的变化。在短短的几个月的时间里，人们对大模型的认识已经从对其zero-shot能力感到惊讶，转变为考虑改进模型质量、提高模型可用性。 「大语言模型(LLMs)其实就是利用高容量的模型架构（例如Transformer）对海量的、多种多样的数据分布进行建模得到，它包含了大量的先验
阅读更多...
图神经网络模型介绍（1）

图神经网络模型介绍（1）

我们将图神经网络分为基于谱域的模型和基于空域的模型，并按照发展顺序详解每个类别中的重要模型。 1.1基于谱域的图神经网络         谱域上的图卷积在图学习迈向深度学习的发展历程中起到了关键的作用。本节主要介绍三个具有代表性的谱域图神经网络：谱图卷积网络、切比雪夫网络和图卷积网络。 （1）谱图卷积网络 卷积定理：函数卷积的傅里叶变换是函数傅里叶变换的乘积，即F{f*g}
阅读更多...
秋招最新大模型算法面试，熬夜都要肝完它

秋招最新大模型算法面试，熬夜都要肝完它

💥大家在面试大模型LLM这个板块的时候，不知道面试完会不会复盘、总结，做笔记的习惯，这份大模型算法岗面试八股笔记也帮助不少人拿到过offer ✨对于面试大模型算法工程师会有一定的帮助，都附有完整答案，熬夜也要看完，祝大家一臂之力 这份《大模型算法工程师面试题》已经上传CSDN，还有完整版的大模型 AI 学习资料，朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费
阅读更多...
【生成模型系列（初级）】嵌入（Embedding）方程——自然语言处理的数学灵魂【通俗理解】

【生成模型系列（初级）】嵌入（Embedding）方程——自然语言处理的数学灵魂【通俗理解】

【通俗理解】嵌入（Embedding）方程——自然语言处理的数学灵魂 关键词提炼 #嵌入方程 #自然语言处理 #词向量 #机器学习 #神经网络 #向量空间模型 #Siri #Google翻译 #AlexNet 第一节：嵌入方程的类比与核心概念【尽可能通俗】 嵌入方程可以被看作是自然语言处理中的“翻译机”，它将文本中的单词或短语转换成计算机能够理解的数学形式，即向量。 正如翻译机将一种语言
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2