微信小程序23__flex布局 相关的3种居中: 水平居中_垂直居中_水平垂直居中

这篇具有很好参考价值的文章主要介绍了微信小程序23__flex布局 相关的3种居中: 水平居中_垂直居中_水平垂直居中。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

3 种居中方式, 在页面布局中经常用到, 现作一记录。

第一种   水平居中

类似这样写法

display:  flex;

flex-direction:  column;                //垂直布局

align-items:  center;                    // 水平居中    

justify-content:  space-around; //垂直方向分散布局

第二种  垂直居中

类似这样写法

display:  flex;

flex-direction: row;          //水平布局      

align-items: center;        // 垂直居中

第三种  水平垂直布局

可以是类似这样写法:

display: flex;

flex-direction: column;  // 垂直布局

align-items: center;        // 水平居中

justify-content:  center;  //垂直居中

width:   33%;                   //宽度占屏幕的1/3         文章来源地址https://www.toymoban.com/news/detail-773467.html

到了这里,关于微信小程序23__flex布局 相关的3种居中: 水平居中_垂直居中_水平垂直居中的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • 微信小程序的浮动与定位,flex布局

    微信小程序的浮动与定位,flex布局

    元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制 , 移到其父元素中指定位置的过程。 在css 中 , 通过float属性来定义浮动 , 其基本格式如下 : { float : none |left |right ;} (1)其中 , none ——— 默认值 , 表示元素不浮动 ; (2)left ——— 元素向左浮动 ; (3right ——— 元

    2024年04月17日
    浏览(13)
  • 微信小程序 居中、居右、居底和横向、纵向布局,文字在图片中间,网格布局

    微信小程序 居中、居右、居底和横向、纵向布局,文字在图片中间,网格布局

    微信小程序居中、居右、横纵布局 1、水平垂直居中(相对父类控件) 方式一:水平垂直居中 父类控件:   //注意:这里的 height 写 100%会使得垂直居中可能会不生效 可能会有兼容问题 方式二:水平垂直居中(方式二推荐) 父类控件:position: relative; 子类控件: 方式三:水

    2024年02月14日
    浏览(15)
  • Flex布局简介及微信小程序视图层View详解

    Flex布局简介及微信小程序视图层View详解

    目录 一、Flex布局简介 什么是flex布局? flex属性 基本语法和常用属性 Flex 布局技巧 二、视图层View  View简介 微信小程序View视图层 WXML 数据绑定 列表渲染 条件渲染 模板 WXSS 样式导入 内联样式 选择器 全局样式与局部样式 WXS 示例 注意事项 页面渲染 数据处理 Flex 布局(又称

    2024年02月20日
    浏览(12)
  • 微信小程序进阶——Flex弹性布局&轮播图&会议OA项目(首页)

    微信小程序进阶——Flex弹性布局&轮播图&会议OA项目(首页)

    目录 一、Flex弹性布局 1.1 什么是Flex弹性布局 1.1.1 详解 1.1.2 图解  1.1.3 代码演示效果 1.2 Flex弹性布局的核心概念 1.3 Flex 弹性布局的常见属性 1.4 Flex弹性布局部分属性详解 1.4.1 flex-direction属性 1.4.2 flex-wrap属性 1.4.3 flex-flow属性 1.4.4 justify-content属性 1.4.5 align-items属性 1.4.6 

    2024年02月05日
    浏览(12)
  • 使用flex弹性布局来为微信小程序写自适应页面

    使用flex弹性布局来为微信小程序写自适应页面

    我们知道,写习惯了前端的人,一般切图后布局页面的话,上手最习惯的是基于盒子模型的浮动布局,依赖 display 属性 + position属性 + float属性,但是浮动布局有一些致命的小问题,比如垂直居中比较费劲,比如著名的float坍塌问题,另外有些极端情况下,还得使用模型+clear

    2024年02月09日
    浏览(13)
  • 微信小程序入门与实战之rpx响应式单位与flex布局

    微信小程序入门与实战之rpx响应式单位与flex布局

    小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: app.json必须有一个pages数组: 一个小程序页面由四个文件组成,分别是: 注意:为了方便开发者减少配置项,描述页面的四个文件必须具有

    2024年02月03日
    浏览(10)
  • 微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效

    微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效

    页面使用了scroll-view,对应的wxss使用了flex布局,也就是scroll-view设置了display:flex; 会发现flex不生效,并且这个时候微信小程序会警告[pages/XXX/XXX] 设置 enable-flex 属性以使 flexbox 布局生效。   代码如下: 添加上这个属性之后,就可以了。

    2024年02月12日
    浏览(13)
  • 2022-11 CSS:flex布局父子宽度问题-小程序scrollView-div横向滚动字体超出隐藏-居中

    2022-11 CSS:flex布局父子宽度问题-小程序scrollView-div横向滚动字体超出隐藏-居中

    如上图第二行子元素宽度会跟随第一行宽度 解决方案: 对第二行设置: width: max-content; 使其宽度跟随自身内容 如上图,左侧宽高为112rpx,宽度不生效 解决方案: 对左侧图片设置宽高的同时, 设置最小宽高 效果如下: 例1:

    2024年02月09日
    浏览(11)
  • 【微信小程序】6天精准入门(第3天:小程序flex布局、轮播图组件及mock运用以及综合案例)附源码

    【微信小程序】6天精准入门(第3天:小程序flex布局、轮播图组件及mock运用以及综合案例)附源码

    布局的传统解决方案,基于[盒状模型],依赖display属性 + position属性 + float属性 Flex是 Flexible Box 的缩写,意为” 弹性布局 ”,用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 display: ‘flex’         容器默认存在两根轴: 水平的主轴(main axi

    2024年02月08日
    浏览(17)
  • uni-app/微信小程序:scroll-view纵向滚动高度自适应flex布局填充剩余高度

    uni-app文档:https://uniapp.dcloud.net.cn/component/scroll-view.html 使用竖向滚动时,需要给 一个固定高度,通过 css 设置 height 微信文档:https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height 所以,给scroll-view设置

    2024年02月09日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包