当前标签: flex
探秘 flex 上下文中神奇的自动 margin
为了引出本文的主题，先看看这个问题，最快水平垂直居中一个元素的方法是什么？ 水平垂直居中也算是 CSS 领域最为常见的一个问题了，不同场景下的方法也各不相同，各有优劣。嗯，下面这种应该算是最便捷的了： <div class="g-container"> <div class="g-box"></div> </div...
2019-05-23 10:56
阅读(185)
flex伸缩布局之九宫格
今天做微信小程序的时候，在布局的时候遇到了很大的麻烦，flex布局基本忘了。看了一下阮一峰前辈的博客，然后加上自己的一些理解。 这是九宫格效果图 这是html结构 这是css代码（重点，敲黑板） 首先对基本属性做个简单的介绍，display：flex将盒子转为伸缩盒子，flex-wrap控制...
2018-08-23 22:36
阅读(1421)
flex布局可能碰到的坑1
flex布局非常好用，但在开发过程中可能会碰到的一些坑 1、内容超出容器 大致情况是：在一个设置了display:flex布局的大容器A中并排放置两个子容器，并且子容器设置flex:1，子容器中都有一个元素包含一段文本，这段文本设置了不换行并且显示省略号的样式，当文本过长的时候，子容器会被撑开，如下效果： ...
2018-08-13 00:26
阅读(1343)
微信小程序页面使用flex布局在iOS9.X中渲染bug的解决
iOS9.X系统在渲染微信小程序页面时无法对使用flex布局的列表页面、文章内容类型页面进行正常渲染。表现为页面内容不显示或者页面样式错乱。 场景一：文章内容页面样式错乱 页面代码 <view class='container'> <view class='articleTitle'>意外健康险索赔指引</vie...
2018-08-09 19:19
阅读(753)
day7-8 position、flex、两列布局、三列布局
<>postion * position:static 静态定位|常规定位|自然定位 作用 使元素定位于常规流/自然流之中 特点 1：忽略trbl或者z-index声明 2：两个相邻的元素之间的外边距会重叠 3： 具有固定width、height的元素，如果把左右外边距设置为auto，则左右外布距会自动扩...
2018-07-27 12:16
阅读(295)
微信小程序——flex布局里的text汉字格式设置
flex布局里的text汉字格式 代码放在最后。官方给的代码给的点此 <http://developers.weixin.qq.com/miniprogram/dev/component/view.html> ，我下面结果就是在此基础之上改的。 我们在微信开发者工具里，编辑显示的情况常常出现如下情况： 改后→...
2018-07-21 11:28
阅读(447)
微信小程序flex布局（相对定位与绝对定位）
* position: relative;相对定位：想对自身进行定位，参照物是自己。 * position: absolute;绝对定位：相对离它最近的一个已定位的的父级元素进行定位，若该父级元素不存在，则相对于该页面定位。 ...
2018-07-18 16:55
阅读(248)