微信小程序开发--flex详细解读(2)

一、align-items和其参数  stretch / baseline

注:sretch只有在交叉轴没有设置固定长度的情况下才有作用

                                

baseline是以第一个子元素为基准,后面的子元素与第一个子元素对齐。

二、flex-wrap 和其参数 row-wrap (默认)  /  wrap    /

flex-wrap:作用---换行

flex布局,基础内容已经结束,欢迎大家一起交流。

<view class="root">

<view class="box1">1</view>

<view class="box2">2</view>

<view class="box3">3</view>

</view>

.root{

display: flex;

/* 方块以列的方式排布 */

/* flex-direction: column; */

/* 把方块的位置调转 */

/* flex-direction: column-reverse; */

/* justify-content: space-evenly; */

flex-direction: row;

justify-content: center;

/* align-items: baseline; */

flex-wrap:wrap;

height: 370px;

}

.root view{

width: 150px;

height: 100px;

}

.box1{

">bisque;

font-size:30px;

}

.box2{

">blue;

font-size:20px;

}

.box3{

">pink;

font-size:60px;

}

原文地址:https://www.cnblogs.com/DreamchaserHe/p/11429880.html

时间: 2024-10-10 16:51:32

微信小程序开发--flex详细解读(2)的相关文章

微信小程序开发--flex布局

{ "usingComponents": {}, "backgroundTextStyle": "dark", "navigationBarBackgroundColor": "#0e0e0e", "navigationBarTitleText": "Music Player", "navigationBarTextStyle": "wh

资讯 | 2018年1月15日微信公开课解读!微信小程序开发资源

引言:2018年1月15日 微信公开课PRO开课了,本次课时内容将涉及:小程序.智慧零售.企业微信.小游戏  (附学习参考资料) 为了快速理解「2018 微信公开课 PRO 版」上张小龙的一小时演讲内容,结合下午微信公开课课室A_B_C的课时安排,这里为大家提前整理了相应的小程序学习参考资料: 微信公开课pro_A课室(14:00-17:50) 主题:小程序产品能力.开发.应用及规则 一.如何开发一个优秀的微信小程序/小游戏 微信小程序官方工具  https://mp.weixin.qq.com

商超行业微信小程序开发定制一般多少钱 (行业技术人员解读)

商超行业微信小程序开发多少钱?如果想要开发一个商超行业微信小程序大概得 需要多少钱呢?随着时代的发展小程序已经逐渐取代了很多传统APP的存在. 越来越多的品牌和企业个人都将小程序的开发作为首要目标,这也足以证明小程 序的优势是非常大的.那么下面我们就来说一说小程序开发大概需要多少钱. 一.模板开发模板开发具体步骤 模板小程序开发多少钱?首先在小程序开发之前必须搞清楚自己的需求,如果你 想要开发的小程序功能比较普遍,跟市面上的小程序基本相似,而且同样的商业 形态还很多的话,比方说网店.商城.分销系

微信小程序开发入门教程

做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了.闲话不多说,我们先来看看其有哪些官方文档. 微信公众平台开发者文档统一入口为:https://mp.weixin.qq.com/wiki,这里面大部分内容都是以前就有的,微信开发都是基于此份文档. 现在的变化是在这份文档的顶部加了一个“微信公众平台.小程序”的入口,这个入口才就是专门针对微信小程序开发的文档,如下图:

微信小程序开发的入门教程

广州微信小程序开发公司(www.dthulian.com)品向科技,下面跟大家详细介绍微信小程序开发的入门教程: 开发前准备: 注册小程序帐号 绑定开发者 登录微信公众平台小程序,进入用户身份- 开发者,新增绑定开发者. 已认证的小程序可以绑定不多于20个开发者.未认证的小程序可以绑定不多于10个开发者. 获取AppID下载并安装开发者工具 下载完成后,使用管理员或者绑定的开发者微信号扫码登录. 一个微信小程序 创建项目 我们需要通过开发者工具,来完成小程序创建和代码编辑. 开发者工具安装完成后

微信小程序开发心得

微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认证信息如,营业执照等 再次就是用一个未曾开通过公众号的QQ号或微信号来注册一个微信小程序号. 最后,下载微信小程序开发工具. 由于这里,我们更多的关注如何去开发一些app,而不是科谱微信小程序,故在此不在过多的解释,详细的说明,可以去官网帮助文档. 首先,我们拿自己的项目在一步一步的说明并开发吧,

微信小程序开发 --02

微信小程序在开发中,难度系数不是很大,其中应用的技术也是web开发中常用的技术,虽然在微信开发者工具中的叫法与常见的web开发的叫法不太一样. 首先,在微信小程序开发中,代码文件格式大体有以下四中: .wxml .wxss .js .json 首先,wxml后缀的文件类似于html和xml的结合,例如在html中常用的div在微信小程序开发中被替换成了view,而在html中输出文本用的p标签被替换成了text标签,引入图像由html中的img 标签变成了image标签,等等.如果你之前开发的w

微信小程序开发(3) 热门电影

在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发热门电影及预览功能. 本文主要分为两个部分,小程序主体部分及计算器业务页面部分 一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 1. 小程序逻辑 App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, onHide: f

微信小程序开发日记——高仿知乎日报(上)

本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教程分为以下三篇 微信小程序开发日记--高仿知乎日报(上) 微信小程序开发日记--高仿知乎日报(中) 微信小程序开发日记--高仿知乎日报(下) 三篇分别讲不同的组件和功能块 这篇要讲 API分析 启动页 轮播图 日报列表 浮动按钮 侧滑菜单 API分析 以下是使用到的具体API,更加详细参数和返回结