容器的概念,是用来包含其它容器(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. __proto__、prototype和原型对象

    一.__proto__ 对象内部存在一个指针,用来指向上一层函数的原型对象.ECMA-262第五版中关这个指针叫[[prototype]],但Firefox.Safari和Chrome在每个对象上都支 ...

  2. 将Python脚本打包成可执行文件——转载

    Python是一个脚本语言,被解释器解释执行.它的发布方式: py文件:对于开源项目或者源码没那么重要的,直接提供源码,需要使用者自行安装Python并且安装依赖的各种库.(Python官方的各种安装 ...

  3. python学习Day6 元组、字典、集合set三类数据用法、深浅拷贝

    一.深浅拷贝 1.  值拷贝 ls1 = ls2  不开辟空间,指针跟着走.(直接将ls1中存放的地址拿过来,内存中不会开辟新的空间,所以你怎么变,我也跟着变.)(ls1内部的所有类型的值发生改变,l ...

  4. leetcode136只出现一次的数字

    交换律:a ^ b ^ c <=> a ^ c ^ b 任何数于0异或为任何数 0 ^ n => n 相同的数异或为0: n ^ n => 0 int singleNumber ...

  5. 如何自定义Django数据库中的字段

    新建完项目之后,想要自定义字段 # 创建一个自定义的字段 class MycharField(models.Field): def __inif__(self, max_lenth, *args, * ...

  6. Mysql 常用操作记录

    1.查看数据库: mysql> show databases; +--------------------+ | Database | +--------------------+ | info ...

  7. 使用Fiddle抓取IOS手机

    1.配置Fiddle (Tools->Options) 勾选后,按照提示下载安装一个认证 Fiddle默认8888端口 2.电脑开个热点,手机连上后,在该wifi的代理配置中,选择手动,服务器输 ...

  8. workerman与thinkphp结合

    运行workerman需要安装pcntl和event或者libevent pcntl安装方法: 以php-5.5.20为例,实际情况按自己安装的PHP目录 一. 找到PHP源码,进入 php-5.5. ...

  9. AD16PCB如何快速删除走线

    工具(Tools)取消布线(Un_Route)全部(AII) ad pcb画图,如果想整体去掉一条线,只要是连接在一起的,不管在哪一层,都可以采取如下方法:1.PCB画面下,按组合键Ctrl+H,会出 ...

  10. UDP广播 MAC地址

    enduser_setup.start() ListenPort = wifi.setmode(wifi.STATIONAP) wifi.sta.autoconnect() clientid = wi ...