一、结构: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. 01.JAVA语言基础相关解答

    1.首先,第一个问题谈到一个java类文件中真的只能有一个公有类吗?并给出了以下代码.可以看出这个程序里有两个public类: 我进行了不同的调试:                           ...

  2. python3中pymysql模块的事务操作

    try:    cursor.execute(sql_1)     cursor.execute(sql_2)     cursor.execute(sql_3) except Exception a ...

  3. [转]细说OpenSessionInView问题

    转载:https://www.cnblogs.com/zjrodger/p/4615809.html. [环境参数] 环境:SSH框架 [问题描述]  NoSession问题 HibernateTem ...

  4. [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 ...

  5. Solidity智能合约语言

    语言本身 ethereum官网 https://ethereum.org/zh/ 笔记 uint[] result = new uint[](3);   uint[] memory result = ...

  6. rIoTboard学习系列

    刚在咸鱼买了块开发板,比较老了14年的,SOC为imx6solo,内核3.10,uboot2009的,准备先移植一个较新的uboot 到nxp的git下获取他们维护的uboot,网址http://gi ...

  7. 第04组 Alpha冲刺(3/6)

    队名:new game 组长博客:戳 作业博客:戳 组员情况 鲍子涵(队长) 燃尽图 过去两天完成了哪些任务 才两天,也就是实现一些功能而已 复习 接下来的计划 实现更多的功能 为下周的比赛准备 还剩 ...

  8. 主流chatbot机器人调研

    wit.ai api.ai microsoft bot frameword rasa pydial 问答系统 语义匹配 语义表示式匹配与交互式匹配.语义表示式匹配是将用户query与候选query分别 ...

  9. torch_02_多项式回归

    """ torch.float64对应torch.DoubleTensor torch.float32对应torch.FloatTensor 将真实函数的数据点能够拟合成 ...

  10. 使用STS加入controller注解后编写程序无法自动提示

    1.加入@Controller注解后编写程序无法自动提示,去掉了@Controller注解后就可以了! ​ ​ 2.解决方案:将@Controller替换为@RestController后,可以完美的 ...