uniapp下页面布局分析三—

本文继续前面的内容，App.vue采用了flex布局

垂直居中还是有点难度的。

但是习惯使用flex布局后，又能简单的实现。

页面只有一个元素

<template><view class="center"><view style="background-color: blue">居中文字</view></view>
</template>
<style>.center {flex: auto;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: red;}
</style>

这里首先呢，居中是基于父元素的宽高下居中，所以，父元素得有一定的宽高，flex布局下，宽度默认是最大，但高度由子元素决定。

所以flex: auto;让父元素占满剩余空间。然后父元素是flex+行布局display: flex; flex-direction: column;。最后便是水平居中+垂直居中align-items: center; background-color: red;。底色是为了更明显看到父子元素所占的空间。

这里只有一行文字，多行文字的效果：

也是没问题的。

多个元素

<template><view class="center"><view style="background-color: blue">居中文字1</view><view style="background-color: yellow">居中文字2</view></view><view style="flex: none; bottom: 0px; height: 50px">我固定在底部</view>
</template>
<style>.center {flex: auto;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: red;}
</style>

可以看到，一样是会自动居中的，问题不大。

flex布局是比较灵活的。用好该布局可以解决大多数场景，也让css代码更简单。

uniapp下页面布局分析三——元素垂直居中相关推荐

css前端知识分享—页面布局分析
今天分享下"css前端知识分享-页面布局分析"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下 ...
基于制表位停止检测的页面布局分析方法_TesseractOCR内置
基于制表位的混合页面版面分析技术: 摘要:提出了一种新的混合页面布局分析算法,该算法使用自底向上的方法形成初始数据类型假设,并定位页面格式化时使用的制表符.检测到的制表符停止符用于推断页面的列布局.然 ...
vue垂直布局_前端页面布局中水平、垂直居中问题
前言两年前工作时开的博客,一年前写了两篇博文,然后就到了现在才重拾起笔.原因有二,一是自觉技术不足,二曰懒. 最近由于在项目中遇到需求为拖动列可调整列顺序的表格,最后找到一款基于JQuery名为Da ...
xml信息管理系统_WPF信息管理系统项目实战教程二：使用XAML实现页面布局
首页面布局设计 XAML(Extensible Application Markup Language),可扩展应用程序标记语言的使用使得C#桌面应用程序开发前后端实现真正分离.前端人员可使用该标记语 ...
页面布局的几种宽度设置方式—html
今天分享下"页面布局的几种宽度设置方式-html"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习 ...
用 CSS 实现元素垂直居中，有哪些好的方案？
DIV居中的经典方法 1. 实现DIV水平居中设置DIV的宽高,使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中. 1 div{ 2 width: 100px; 3 he ...
初识HTML（五）进阶：CSS盒子模型、页面布局
目录 CSS 盒子模型(Box Model) 页面布局浮动流制作导航栏如何页面布局定位流 relative相对定位 absolute绝对定位 fixed固定定位 CSS 盒子模型(Box Mo ...
ps切图与版心页面布局注意问题
版心是页面内容的展示区域有具体宽度 width:px: 左右居中 margin{0 auto} Ps切图方式方式一矩形选框工具选中区域 > ctrl+c > ctrl+n > c ...
CSS3与页面布局学习笔记（三）——BFC、定位、浮动、7种垂直居中方法
一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即"块级格式化上下文", IFC(Inline Formatting Co ...

uniapp下页面布局分析三——元素垂直居中

页面只有一个元素

多个元素

uniapp下页面布局分析三——元素垂直居中相关推荐

最新文章

热门文章