微信小程序开发--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号)时候,需要填写相关的公司 ...
- 【微信小程序开发•系列文章六】生命周期和路由
这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...
随机推荐
- 01.JAVA语言基础相关解答
1.首先,第一个问题谈到一个java类文件中真的只能有一个公有类吗?并给出了以下代码.可以看出这个程序里有两个public类: 我进行了不同的调试: ...
- python3中pymysql模块的事务操作
try: cursor.execute(sql_1) cursor.execute(sql_2) cursor.execute(sql_3) except Exception a ...
- [转]细说OpenSessionInView问题
转载:https://www.cnblogs.com/zjrodger/p/4615809.html. [环境参数] 环境:SSH框架 [问题描述] NoSession问题 HibernateTem ...
- [LeetCode] 907. Sum of Subarray Minimums 子数组最小值之和
Given an array of integers A, find the sum of min(B), where B ranges over every (contiguous) subarra ...
- Solidity智能合约语言
语言本身 ethereum官网 https://ethereum.org/zh/ 笔记 uint[] result = new uint[](3); uint[] memory result = ...
- rIoTboard学习系列
刚在咸鱼买了块开发板,比较老了14年的,SOC为imx6solo,内核3.10,uboot2009的,准备先移植一个较新的uboot 到nxp的git下获取他们维护的uboot,网址http://gi ...
- 第04组 Alpha冲刺(3/6)
队名:new game 组长博客:戳 作业博客:戳 组员情况 鲍子涵(队长) 燃尽图 过去两天完成了哪些任务 才两天,也就是实现一些功能而已 复习 接下来的计划 实现更多的功能 为下周的比赛准备 还剩 ...
- 主流chatbot机器人调研
wit.ai api.ai microsoft bot frameword rasa pydial 问答系统 语义匹配 语义表示式匹配与交互式匹配.语义表示式匹配是将用户query与候选query分别 ...
- torch_02_多项式回归
""" torch.float64对应torch.DoubleTensor torch.float32对应torch.FloatTensor 将真实函数的数据点能够拟合成 ...
- 使用STS加入controller注解后编写程序无法自动提示
1.加入@Controller注解后编写程序无法自动提示,去掉了@Controller注解后就可以了! 2.解决方案:将@Controller替换为@RestController后,可以完美的 ...