刚开始实习,从改页面代码开始做起,以前学的前端知识也就只记得一些基础了,实践的内容都忘了。最近修改一个页面,需要将三个li均匀分布在同一排,折腾了好一会,然后看见别人博客的用法学会处理,在这里记下来。 使用的是css3的一个flax属性,父级元素用display:flex;布局,子集元素用flex: ...
分类:
其他好文 时间:
2018-09-04 00:13:13
阅读次数:
177
1、弹性盒布局对齐模式 1.1、弹性盒子 在规定弹性盒子之中的子级元素换行显示之前父级元素必须是弹性盒子模型,也就是设置 display 为 flex 代码如下: 结果: 1.2、弹性盒子换行显示 结果: 从上面的结果来看虽然子元素换行显示了但是布局效果并不是很好,好的别着急我们接着往下看 1.3、 ...
分类:
Web程序 时间:
2018-09-02 12:30:38
阅读次数:
191
css: align-items: center; 该样式配合display: flex;可以使子元素垂直居中 justify-content: center; 该样式配合display: flex;可以使子元素水平居中 vertical-align:; 垂直对齐方式 outline-style:; ...
分类:
其他好文 时间:
2018-08-30 19:57:06
阅读次数:
137
// 加在父级div中垂直居中:align-items:center; display: -webkit-flex;水平居中:justify-content:center; display: -webkit-flex; 引用: https://zhidao.baidu.com/question/15 ...
分类:
其他好文 时间:
2018-08-28 10:30:51
阅读次数:
158
最近碰见这样一个需求,要让图片横向排列设置x方向的滚动条滚动查看,原本当直接创建一个IFC(inline,float什么的)就解决了,搞了半天发现搞不定(IFC也是不能父元素宽度自适应子元素宽度之和的,因为会换行。。),最后用flex解决了(然后又发现使用table也是可以的),然后学了两个新名词G ...
分类:
Web程序 时间:
2018-08-22 22:05:07
阅读次数:
204
一:flex大法 步骤 1. 设置外部容器 2. 设置内部容器 原理 https://developer.mozilla.org/zh CN/docs/Web/CSS/CSS_Flexible_Box_Layout 示例 二:padding补偿法 网上搜了一下发现这种方法居然有这种这个高大上的名词。 ...
分类:
Web程序 时间:
2018-08-22 22:04:34
阅读次数:
387
1. flex中的align-item 2. tabel + tabel-cell 3. transform方式(多用于列表图片不规整的居中显示) ...
分类:
其他好文 时间:
2018-08-22 16:55:08
阅读次数:
162
全部 {{item.categoryName}} 这是内容 .small_nav{width:100%; background: #fff; font-size: 26rpx;margin-bottom:20rpx;} .small_nav_scroll{ display: flex; height... ...
分类:
微信 时间:
2018-08-21 16:34:23
阅读次数:
516
1.华为mate8对flex属性兼容性问题。 原因: 华为mate8只支持 -webkit-box -webkit-box 盒子里的元素必须是块级元素(inline-block也是不行的) 子元素不支持 flex 属性,但是支持 box 相关的 -webkit-box-flex 属性 解决:disp ...
分类:
其他好文 时间:
2018-08-20 14:29:19
阅读次数:
157