容器的概念,是用来包含其它容器(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. Windows下查看自己电脑的网关mac以及手动获取新的地址

    场景:正在上班时,工作电脑突然无法连接网络了.查看配置发现DNS服务器地址被分配到了192.168.1.1,瞬间懵了? 过程:(1)进入cmd.使用ipconfig /all查看网关地址; (2)使用 ...

  2. DEDECMS 多站用一个站图片

    function replaceurl($newurl) { $newurl=str_replace('src="/uploads/allimg/','src="xxx.com/u ...

  3. Https的前世今生

    1.年前会议 马上要过年了,公司业务上的需求也少了很多,这不,王小二他们召开了一场技术会议,盘点年前能干点啥. 只见C哥写了一份清单,其中一项是全站升级https. C哥说:https是一种趋势,但目 ...

  4. linux随机字符串

    pwgen  -s 32 1 openssl passwd -salt openssl rand -base64 32 openssl rand -hex 100

  5. css 之过渡效果

    之前写css的效果,都是使用js 来完成的,但是写js比较耗费时间,有时候逻辑不对,还出不来效果,所以也比较烦:所以一些简单的效果,就使用css 来完成会比较好一些,不必耗费太多的精力: 但是写css ...

  6. Linux 下安装多个 tomcat

    安装多个 tomcat 和安装一个同理,只是需要更改一些配置. 1.复制多个 tomcat 安装目录 cp /usr/local/tomcat_8080/ /usr/local/tomcat_8081 ...

  7. 不用安装Oracle客户端

    1 pl/sql developer 1.1 下载解压instantclient-basic-nt-12.1.0.2.0. 1.2 在其目录下新建Network/ADMIN/tnsnames.ora文 ...

  8. 面试必备:ArrayList源码解析(JDK8)

    面试必备:ArrayList源码解析(JDK8) https://blog.csdn.net/zxt0601/article/details/77281231 概述很久没有写博客了,准确的说17年以来 ...

  9. Taro之使用百度地图

    适配h5的时候要使用地图功能获取位置,选取了百度地图.首先在index.html文件引入. <script type="text/javascript" src=" ...

  10. java课程之团队开发冲刺1.5

    一.总结昨天进度 1.昨天由于时间较少,没有太多的时间来进行学习Sqlite 二.遇到的困难 1.由于最终的程序需要调用本地的数据库,所以我们需要在安装程序的时候就需要直接附带安装一个本地的数据库到手 ...