容器的概念,是用来包含其它容器(container)和项目(item)。

flex container——flex容器

A flexbox layout is defined using the flex or inline-flex values of the display property on the parent item. This element then becomes a flex container, and each one of its children becomes a flex item.

给view(在小程序中用view,h5里用div)的display属性设置为flex或inline-flex,这个view就成了flex容器,view里的元素就成了flex item。

A value of flex causes the element to become a block level flex container, and inline-flex an inline level flex container. These values create a flex formatting context for the element, which is similar to a block formatting context in that floats will not intrude into the container, and the margins on the container will not collapse with those of the items.

设置为display:flex时,是块级弹性容器;设置为display:inline-flex时,是行内级弹性容器。

微信小程序开发之搞懂flex布局2——flex container的更多相关文章

  1. 微信小程序开发之搞懂flex布局1——Flexbox

    Flexbox ——弹性布局 Flexbox is a layout model for displaying items in a single dimension — as a row or as ...

  2. 微信小程序开发之搞懂flex布局3——Flex Item

    Flex Item flex容器的子元素就是这个容器的flex item. The direct children of a Flex Container (elements with display ...

  3. 微信小程序开发之搞懂flex布局4——Main Axis

    Main Axis——主轴 当flex-direction设置为row或row-reverse时,主轴的方向为水平方向.此时flex item为行内级元素. 当flex-direction设置为col ...

  4. 微信小程序开发之搞懂flex布局5——cross axis

    Cross Axis——交叉轴,与Main Axis(主轴)垂直交叉. main axis is row or row-reverse the cross axis runs down the col ...

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

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

  6. 【微信小程序开发】秒懂,架构及框架

    今天1024程序员节,写文章庆祝!!! 今天的文章是讲微信小程序开发的,按理解把架构与框架说说.有不对之处请大神指点…… 微信小程序与web应用很像,但是原理不同,微信小程序是运行在微信应用内的,不是 ...

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

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

  8. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

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

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

随机推荐

  1. MYSQL5.7脚本运行时出现[Warning] Using a password on the command line interface can be insecure

    MYSQL版本:5.7 在写linux脚本执行MYSQL命令的时候,如果使用 MYSQL="mysql -hlocalhost -P3306 -uroot -p666666" 登陆 ...

  2. cmake安装

    下载之后 1.解压 root@zsh-linux:/opt#tar -zxvf  cmake-2.8.4.tar.gz 2.然后 cd 到cmake-2.8.4目录下  安装 root@zsh-lin ...

  3. Java实现把图片转成字符画

    1,先看效果图:

  4. <Dare To Dream>团队项目用户验收评审

    实验十二 团队作业8—团队项目用户验收评审 任务1:团队作业Beta冲刺 Beta冲刺第一天:http://www.cnblogs.com/Dare-To-Dream/p/9226994.html B ...

  5. phxpaxos实现状态机CAS操作

    看过了phxpaxos的实现,发现选主逻辑中非主也能够调用Propose.因此即使开启了选主功能,也可能会出现两个人同时Propose的场景.而Propose时,InstanceID只是作为输出而非输 ...

  6. C#解析JSON字符串总结(转载)

    JSON文件读取到内存中就是字符串,.NET操作JSON就是生成与解析JSON字符串. 操作JSON通常有以下几种方式: 1. 原始方式:按照JSON字符串自己来解析. 2. 通用方式[★★★★★]: ...

  7. foreach和List.Foreach 退出循环相关问题

    foreach: continue;:退出本次循环 break;:退出循环 return;:退出循环 List.Foreach: return;:退出本次循环 小结:list.Foreach中不能退出 ...

  8. python之元组及其方法---整理集

    元组: 区别:与列表类似,是对列表的二次加工:用小括号包括起来:元素不可修改:不可增加.删除 技巧:创建元组的时候,一般在最后一个元素后面加一个逗号:为了与方法区分:并且这个逗号不算元素例如: tu= ...

  9. mybatis出现无效的列类型

    package com.webapp.hanqi.test; import java.util.Date; import org.junit.jupiter.api.AfterEach; import ...

  10. “新智认知”杯上海高校程序设计竞赛暨第十七届上海大学程序设计春季联赛(D题,贪心+栈)

    链接:https://ac.nowcoder.com/acm/contest/551/D来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 524288K,其他语言10485 ...