今天项目中碰到一个flex布局的div内部的font-size导致第二个div内部文字换行时,整个div下降 发现下降的高度就是margin的高度; 然后设置margin自动就ok margin: 10px auto; vertical-align: middle; margin: 10px aut ...
分类:
其他好文 时间:
2018-12-14 13:09:42
阅读次数:
137
转:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网页布局(layout)是CSS的一个重点应用。 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方 ...
分类:
其他好文 时间:
2018-12-14 10:53:15
阅读次数:
159
本文由云+社区发表 Flex是Flexible Box 的缩写,意为"弹性布局",是CSS3的一种布局模式。通过Flex布局,可以很优雅地解决很多CSS布局的问题。下面会分别介绍容器的6个属性和项目的6个属性。每个属性会附上效果图,具体实现代码会以github路径形式更新于此。 1.浏览器支持情况 ...
分类:
Web程序 时间:
2018-12-13 12:14:49
阅读次数:
165
flex-direction(项目的排列方向) row(默认值):主轴为水平方向,起点在左端。 row-reverse:主轴为水平方向,起点在右端。 column:主轴为垂直方向,起点在上沿。 column-reverse:主轴为垂直方向,起点在下沿。 lex-wrap属性定义,如果一条轴线排不下, ...
分类:
其他好文 时间:
2018-12-10 13:51:46
阅读次数:
160
前言: flex最常用的就是justify-content和align-items了,这里把这两个属性介绍下,大家更多关于flex布局可以查看阮一峰的日志,写的非常清楚! 阮一峰flex布局的日志:http://www.ruanyifeng.com/blog/2015/07/flex-grammar ...
分类:
其他好文 时间:
2018-12-07 16:43:18
阅读次数:
237
1.利用translate的偏移定位。 2.利用flex布局 备注:css遮罩层 ...
分类:
Web程序 时间:
2018-11-30 18:23:29
阅读次数:
204
原文:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网页布局(layout)是 CSS 的一个重点应用。 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局 ...
分类:
其他好文 时间:
2018-11-30 00:34:56
阅读次数:
258
挺早就接触了css的flex布局,深入使用也就是在近期移动端开发。老来多健忘,只能自己梳理一下知识点,当做温故知新吧。 ,请原谅小白的才疏学浅,写的不到位的地方请指正。 flex属性用于设置或检索弹性盒模型对象的子元素如何分配空间。也就是说当某个div使用了flex后,div也就成为了flex容器, ...
分类:
Web程序 时间:
2018-11-28 15:47:44
阅读次数:
246
前面我们已经获取到了数据,这节我们就好把它用到我们的项目中来。这节课我们主要是使用flex布局和for循环是我们的type_bar展示出来。 关于flex布局的话如果还不是很了解的小伙伴儿可以查阅下阮一峰大神的博客(http://www.ruanyifeng.com/blog/2015/07/fle ...
分类:
移动开发 时间:
2018-11-24 23:49:59
阅读次数:
281
最近在开发公司的平台系统,因为该项目主要是运行在移动端,所以采用了flex弹性布局。flex布局用起来很灵话,提高了开发效率。而且性能貌似比传统的浮动布局好。 1. 首先声明父元素布局方式为弹性布局 display: -webkit-flex; /* Safari */ display:flex; ...
分类:
其他好文 时间:
2018-11-21 15:45:34
阅读次数:
160