微信小程序开发--flex详细解读
一、结构:flex布局 是由一个大的容器加上多个子元素组成。
<view class="container">
<view class="box1"></view>
<view class="box2"></view>
<view class="box3"></view>
</view>
二、使用flex布局,就在父容器里面使用一个flex
.container{
display: flex;
}
三、使用flex和未使用flex对比。
原理:类似于css里面的 block 变成了 inline-block。
四、flex-direction和其参数row / column
五、flex-direction和其参数row-reverse / column-reverse
注:上面这两个参数的作用不仅把方块逆序排布了,同时把对齐方式也改变了。 解决方法 -------- 看下面
六、1、justify-content和其参数 flex-end 、 flex-start;
由于 row-reverse / column-reverse 改变了对齐方向,所以 flex-end / flex-start 作用效果也相反
2、justify-content和其参数 center; (居中对齐)
3.justify-content和其参数 space-between; (两端对齐)
4.justify-content和其参数 justify-content: space-around; (方块左右两边的边距相同)
5、justify-content和其参数 justify-content: space-evenly;(方块等分)
七、align-content和其参数 center; 补充知识点(主轴、交叉轴 的区分 相当于平面坐标系中的 X 和 Y 轴)
flex-column 这个属性决定了谁是主轴,谁是交叉轴
justify-content: 这个属性控制主轴的对齐方式
align-items:这个属性控制交叉轴的对齐方式
当主轴和交叉轴都居中的时候 如下 |||
它会占据整个父容器的居中位置。
未完。。。。。
以上只是个人理解,如有错误,欢迎指教。
微信小程序开发--flex详细解读的更多相关文章
- 微信小程序开发--flex详细解读(2)
一.align-items和其参数 stretch / baseline 注:sretch只有在交叉轴没有设置固定长度的情况下才有作用 ...
- 微信小程序开发:Flex布局
微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...
- 微信小程序开发总结(详细)
转载: 小程序开发总结(详细) 这段时间一直在做小程序,总结下.后续可能会不断更新,努力写仔细点,争取让人看到就能会写. 一,页面结构. 这基本是小程序的标准目录结构.我们从上到下解释下:pages文 ...
- VSCode 微信小程序 开发环境配置 详细教程
本博客已暂停更新,需要请转新博客http://www.whbwiki.com/231.html 配置 VsCode 微信小程序开发环境并非不用官方的 微信小程序开发者工具 ,而是两者配合适用,可以极大 ...
- 剖析简易计算器带你入门微信小程序开发
写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微 ...
- 微信小程序开发入门教程
做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了.闲话不多说,我们先 ...
- 微信小程序开发总结(一)
微信小程序从2016年9月21日开始内测 ,以及在2017年1月9号正式发布也有一段时间了, 很多人开始拥抱微信小程序,我也是一样 ,从微信小程序内测开始就加入进来 , 开始研究微信小程序 ,属于最早 ...
- 微信小程序开发心得
微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...
- 【微信小程序开发•系列文章六】生命周期和路由
这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...
随机推荐
- bdd框架之lettuce
安装 执行 :lettuce (需要在特定的文件夹下) 结果指定到文件中
- js 浮点型运算出错的原因和解决方法
在工作中经常需要进行数字运算,当然也会遇到浮点型数字的运算,但是运算结果却并不是想要. 这种小孩子都会做的简单运算,强大的计算居然算算错?原来,计算机的运算都需要转成二制运算,而二进制和实现位数限制有 ...
- 个人网站 & 博客
www.ykmimi.com (测试使用) http://www.implements.fun/ (测试使用) http://www.java-developer.cn/ (测试使用,预备论坛) ...
- 洛谷 P5461 赦免战俘
洛谷 P5461 赦免战俘 传送门 思路 洛谷7月月赛第一题 着实是一道大水题,然后我月赛的时候没做出来...... 就是一道大模拟题呀,直接dfs就好了,我是反着处理的,所以最后要输出\(1-a[i ...
- [LeetCode] 57. Insert Interval 插入区间
Given a set of non-overlapping intervals, insert a new interval into the intervals (merge if necessa ...
- 黑客最喜欢的15个Nmap扫描命令,熟练掌握你也能成为黑客大神
1.针对IP或主机的基本Nmap扫描 nmap IP 现在,如果要扫描主机名,只需替换主机的IP,如下所示: nmap 域名 2.扫描本地或远程服务器上的特定端口或扫描整个端口范围 nmap -p 1 ...
- 推荐一款移动端小视频App玲珑视频
推荐一款移动端小视频App玲珑视频 一 应用描述 玲珑小视频,边看边聊![海量视频,刷个不停,还能找妹子语音聊天哦][随手拍一拍,记录美好生活,还能拿金币哦][看视频领金币.登录领金币.拍视频领金币. ...
- 轻量级Mysql Sharding中间件——Shark
Shark简介 前身为Kratos,轻量级Mysql分库分表(Sharding)中间件,丰富的Sharding算法支持(2类4种分片算法),能够方便DBA实现库的水平扩容和降低数据迁移成本.Shark ...
- hbase 查看元数据
package com.jason.lala.pipe.dbinfo import com.jason.lala.common.query.option.HbaseOptions import org ...
- ECS -------------- 更换系统
由于是在云服务器上所以更换系统比较简单 1.首先将你运行的实例停止 点击确定 2. 将停止的系统进行更换 确定 点击批量更改 更换需要的系统 点击确定 更换系统输入手机验证码. 更换好了 3.修改远程 ...