微信小程序开发之搞懂flex布局2——flex container
容器的概念,是用来包含其它容器(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的更多相关文章
- 微信小程序开发之搞懂flex布局1——Flexbox
Flexbox ——弹性布局 Flexbox is a layout model for displaying items in a single dimension — as a row or as ...
- 微信小程序开发之搞懂flex布局3——Flex Item
Flex Item flex容器的子元素就是这个容器的flex item. The direct children of a Flex Container (elements with display ...
- 微信小程序开发之搞懂flex布局4——Main Axis
Main Axis——主轴 当flex-direction设置为row或row-reverse时,主轴的方向为水平方向.此时flex item为行内级元素. 当flex-direction设置为col ...
- 微信小程序开发之搞懂flex布局5——cross axis
Cross Axis——交叉轴,与Main Axis(主轴)垂直交叉. main axis is row or row-reverse the cross axis runs down the col ...
- 剖析简易计算器带你入门微信小程序开发
写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微 ...
- 【微信小程序开发】秒懂,架构及框架
今天1024程序员节,写文章庆祝!!! 今天的文章是讲微信小程序开发的,按理解把架构与框架说说.有不对之处请大神指点…… 微信小程序与web应用很像,但是原理不同,微信小程序是运行在微信应用内的,不是 ...
- 微信小程序开发总结(一)
微信小程序从2016年9月21日开始内测 ,以及在2017年1月9号正式发布也有一段时间了, 很多人开始拥抱微信小程序,我也是一样 ,从微信小程序内测开始就加入进来 , 开始研究微信小程序 ,属于最早 ...
- 微信小程序开发学习资料
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 【微信小程序开发•系列文章六】生命周期和路由
这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...
随机推荐
- 教你快速录制gif动图
我们经常会遇到一些场景,需要你向别人展示一些操作或是效果——例如告诉别人某某软件的配置步骤啊.刚设计出来网站的动画效果怎么样啊.某某电影里面的一个镜头多么经典啊.打得大快人心的NBA绝杀瞬间是怎么回事 ...
- MySql TIMEDIFF做计算之后,后台报Illegal hour value '24' for java.sql.Time type 问题
页面需要显示这种格式:31:01:20 但是后台Springboot会提示Illegal hour value '24' for java.sql.Time type in value '24:00: ...
- ubuntu16下安装openssh
由于SecureCRT.xshell远程连接ubuntu是通过ssh协议的,所以,需要给ubuntu安装ssh服务器. 1. ssh协议科普 Secure Shell(缩写为SSH),由IETF的网络 ...
- python安装与pip操作
python安装 1, 下载并解压Python-3.6.2.tar.xz 2,tar xvJf Python-3.6.2.tar.xz 2./configure --prefix=/usr/local ...
- thinkphp 5 _initialize 使用问题
如果继承的是common的话.控制器的_initialize要先继承父类的_initialize parent::_initialize();
- Linux shell 批量运行jmeter脚本
第一版,这些代码有点问题,需要继续更改 #!/bin/bash jmxpath= reportpath= timestamp=$(date +%Y%m%d_%H%M%S) echo timestamp ...
- Redhat系统上开启Telnet服务
https://blog.csdn.net/wolfofsiberian/article/details/51635952 1.操作系统 Redhat Step1:修改配置文件/etc/xinetd. ...
- win7旗舰版64位GHOST版的,安装telnet客户端时,提示:出现错误。并非所有的功能被成功更改。
win7旗舰版64位GHOST版的,安装telnet客户端时,提示:出现错误.并非所有的功能被成功更改. 从安装成功的电脑上拷贝ghost版本缺少的文件,然后再安装telnet客户端,我已打包 链接: ...
- 动态在线扩容root根分区大小的方法详解
前言 本文主要介绍了关于动态在线扩容root根分区大小的相关内容,分享出来供大家参考学习,下面话不都说了,来一起看看详细的介绍吧. ? 1 qemu-img resize yourname.img + ...
- 第九周博客作业 <西北师范大学| 周安伟>
第九周助教作业 助教博客链接https://home.cnblogs.com/u/zaw-315/ 作业要求博客链接https://www.cnblogs.com/nwnu-daizh/p/10726 ...