小程序常用的页面布局

在小程序中最经常使用到的就是flex布局，今天来讲讲flex布局的几个常用属性。
小程序中常用到：

.flex:{display:flex;}

可以实现自定义和自由化的整齐布局。下面是常用的几个属性
1.比例布局【width】；
元素设置单个元素的宽度width:1%-99%不等。换行：flex-wrap:wrap;

2.水平对齐【justify-content】；
从左往右：justify-content:flex-start;
从右往左：justify-content:flex-end;
居中对齐：justify-content:center;
靠左靠右分散：justify-content:space-between;
均匀分散对齐：justify-content:space-around;

3.垂直对齐【align-items】；
居顶部对齐：align-items:flex-start;
居底部对齐：align-items:flex-end;
垂直居中对齐：align-items:center;

4.等分列布局；
和第一个其实一样，每个元素的宽度保持一样，
三等分：width:33%;
四等分：width:25%;
五等分：width:20%;

小程序常用的页面布局相关推荐

小程序开发之页面布局
Flex布局又称弹性布局,在小程序开发中比较适用.因此将Flex布局相关属性整理如下,搞清楚了这个布局,小程序开发的页面布局就不在话下了. 网页布局(layout)是CSS的一个重点应用. 布局的传统 ...
小程序新闻列表页面布局代码_论坛小程序·“我的”页面布局
这次让我们来看看界面是怎么布局的吧! 比如打开模拟器里"我的"页面,找到其所对应的me文件夹里的文件打开me.wxml 查看第一段代码,发现其中包含五个view类,他们的属性标签 ...
微信小程序开发之页面布局
一.概述 Flex布局又称弹性布局,在小程序开发中比较适用.网页布局(layout)是CSS的一个重点应用.布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + f ...
【微信小程序创作之路】- 小程序常用页面样式
[微信小程序创作之路]- 小程序常用页面样式第四章微信小程序用页面样式文章目录 [微信小程序创作之路]- 小程序常用页面样式前言一.总体样式--全局样式and局部样式 1.全局样式 2.局部 ...
image 微信小程序flex_微信小程序进阶－flex布局
对于一个后端程序员来说最麻烦的就是布局了,今天就介绍下小程序的布局,介绍一种高效的小程序布局方案.笔者之前也做过native app的布局,对比下来,小程序的布局没有native那么灵活,毕竟goog ...
微信小程序常用视图容器组件
微信小程序常用视图容器组件 1.组件概述 2.常用的试图容器组件 2.1 view 2.1.1 案例 2.2 scroll-view 2.2.1 案例 2.3 swiper 2.3.1 案例 1.组件 ...
微信小程序开发教程第七章：微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...
微信小程序 View：flex 布局
微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...
vc++6.0获取磁盘基本信息_微信小程序——常用功能2：微信小程序用户登录，申请用户授权并获取用户基本信息...
微信小程序--常用功能2:申请用户授权并获取用户基本信息为了更好的用户体验,很多时候我们想要获取用户的基本信息,从而实现将信息呈现到用户界面.给用户划分地域.给用户分类等功能. 但是要想获取用户信息 ...

小程序常用的页面布局

小程序常用的页面布局相关推荐

最新文章

热门文章