一、结构: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详细解读的更多相关文章

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

    一.align-items和其参数  stretch / baseline 注:sretch只有在交叉轴没有设置固定长度的情况下才有作用                                 ...

  2. 微信小程序开发:Flex布局

    微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...

  3. 微信小程序开发总结(详细)

    转载: 小程序开发总结(详细) 这段时间一直在做小程序,总结下.后续可能会不断更新,努力写仔细点,争取让人看到就能会写. 一,页面结构. 这基本是小程序的标准目录结构.我们从上到下解释下:pages文 ...

  4. VSCode 微信小程序 开发环境配置 详细教程

    本博客已暂停更新,需要请转新博客http://www.whbwiki.com/231.html 配置 VsCode 微信小程序开发环境并非不用官方的 微信小程序开发者工具 ,而是两者配合适用,可以极大 ...

  5. 剖析简易计算器带你入门微信小程序开发

    写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微 ...

  6. 微信小程序开发入门教程

    做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了.闲话不多说,我们先 ...

  7. 微信小程序开发总结(一)

    微信小程序从2016年9月21日开始内测 ,以及在2017年1月9号正式发布也有一段时间了, 很多人开始拥抱微信小程序,我也是一样 ,从微信小程序内测开始就加入进来 , 开始研究微信小程序 ,属于最早 ...

  8. 微信小程序开发心得

    微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...

  9. 【微信小程序开发•系列文章六】生命周期和路由

    这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...

随机推荐

  1. bdd框架之lettuce

    安装 执行 :lettuce  (需要在特定的文件夹下) 结果指定到文件中

  2. js 浮点型运算出错的原因和解决方法

    在工作中经常需要进行数字运算,当然也会遇到浮点型数字的运算,但是运算结果却并不是想要. 这种小孩子都会做的简单运算,强大的计算居然算算错?原来,计算机的运算都需要转成二制运算,而二进制和实现位数限制有 ...

  3. 个人网站 & 博客

    www.ykmimi.com (测试使用) http://www.implements.fun/  (测试使用) http://www.java-developer.cn/  (测试使用,预备论坛) ...

  4. 洛谷 P5461 赦免战俘

    洛谷 P5461 赦免战俘 传送门 思路 洛谷7月月赛第一题 着实是一道大水题,然后我月赛的时候没做出来...... 就是一道大模拟题呀,直接dfs就好了,我是反着处理的,所以最后要输出\(1-a[i ...

  5. [LeetCode] 57. Insert Interval 插入区间

    Given a set of non-overlapping intervals, insert a new interval into the intervals (merge if necessa ...

  6. 黑客最喜欢的15个Nmap扫描命令,熟练掌握你也能成为黑客大神

    1.针对IP或主机的基本Nmap扫描 nmap IP 现在,如果要扫描主机名,只需替换主机的IP,如下所示: nmap 域名 2.扫描本地或远程服务器上的特定端口或扫描整个端口范围 nmap -p 1 ...

  7. 推荐一款移动端小视频App玲珑视频

    推荐一款移动端小视频App玲珑视频 一 应用描述 玲珑小视频,边看边聊![海量视频,刷个不停,还能找妹子语音聊天哦][随手拍一拍,记录美好生活,还能拿金币哦][看视频领金币.登录领金币.拍视频领金币. ...

  8. 轻量级Mysql Sharding中间件——Shark

    Shark简介 前身为Kratos,轻量级Mysql分库分表(Sharding)中间件,丰富的Sharding算法支持(2类4种分片算法),能够方便DBA实现库的水平扩容和降低数据迁移成本.Shark ...

  9. hbase 查看元数据

    package com.jason.lala.pipe.dbinfo import com.jason.lala.common.query.option.HbaseOptions import org ...

  10. ECS -------------- 更换系统

    由于是在云服务器上所以更换系统比较简单 1.首先将你运行的实例停止 点击确定 2. 将停止的系统进行更换 确定 点击批量更改 更换需要的系统 点击确定 更换系统输入手机验证码. 更换好了 3.修改远程 ...