起因 工作以后由于大量使用到了flex布局而碰到了一些尚不清楚的问题,以及一些有意思的特性,在此写篇博客记录一下。 flex三个值的含义 众所周知,flex布局所有的属性有两种:一种作用在弹性容器(Flex container)上,一种作用在弹性项目(Flex item)上,而flex就是作用在弹性 ...
分类:
其他好文 时间:
2018-11-05 11:36:32
阅读次数:
149
引言:2009年,W3C提出了一种新的方案—-Flex布局,Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。转眼就是18年,如今弹性布局也出现了9年了,已经被大多浏览器所支持:Chrome 21+ , Opera 12.1+ , FireFox22+ , ...
分类:
其他好文 时间:
2018-11-04 01:50:17
阅读次数:
261
1.先看几个例子:(1)每个item均未设置width和flex-baiss,元素呈现的大小为flex下内容的大小(2)元素item01只设置width=100px(隐含flex-basis=auto),元素item02只设置flex_basis=250px(隐含width=auto),元素item03同时设置width=50px和flex_basis=140px在主轴方向上还有多少可利用空间。外层div弹性布局,剩余空间=box.width-item01.width-item02.wid
分类:
其他好文 时间:
2018-11-03 02:04:06
阅读次数:
583
.flex{ display:flex; flex-direction:column; width:600px; } .flex div{ width:100px; height:100px; background:red; margin-left:2px; } .flex div:... ...
分类:
其他好文 时间:
2018-11-01 16:59:18
阅读次数:
778
order 控制子元素在父容器的顺序 0 任何整数 负数 order:1; flex-grow谁的值大谁空间多,同样的值就平分 flex-grow:1 flex-shrink 设置弹性容器中项目的收缩比率 1 数字 不能负数 flex -basis 伸缩项目分配空间=伸缩容器空间-basis设置的空 ...
分类:
其他好文 时间:
2018-11-01 14:10:35
阅读次数:
345
效果图: 直接上解决方案: 1、在Swiper标签外套一层View 2、在View的style中设置高度 3、注意style中不要使用flex。 4、完整版轮播图代码(下面即为MainSwiper.js的代码内容) ...
分类:
其他好文 时间:
2018-11-01 13:36:38
阅读次数:
150
前面对控件的操作全部采用的是绝对布局,但是会带来很多麻烦如下: 1.子窗口或控件位置和大小不会随着父窗口的变化而变化 2.在不同平台上显示效果可能差别很大 3.在不同分辨率下显示效果可能差别很大 4.字体的变化也会显示效果影响 5.动态添加和删除子窗口或控件界面布局需要重新设计 wxpython 提 ...
分类:
编程语言 时间:
2018-11-01 01:03:02
阅读次数:
165
小程序中有一个组件swiper 就是滑块视图容器 其中提供了两个属性 previous-margin:前边距,可用于露出前一项的一小部分 next-margin:后边距,可用于露出后一项的一小部分 假设设置 一个view的尺寸为宽为600rpx,高为600rpx,前边距为30rpx,后边距为30rp ...
分类:
微信 时间:
2018-10-31 12:40:02
阅读次数:
679