一个中年girl的技能遗忘清单——曾今理解的Flex是错误的

栏目: CSS · 发布时间: 5年前

内容简介:20181123技能遗忘清单写给未来的自己,也许几个礼拜,也许几年。今天突然接到一个任务,做一个专题。那么我肯定用html+css+js写,但是由于我写了大半年的小程序,我已经忘记了动画怎么写,特效怎么写,甚至连单位布局都忘记了。

20181123技能遗忘清单

  • flex的用法
  • rem的计算方式
  • font发光,字体效果

写给未来的自己,也许几个礼拜,也许几年。

今天突然接到一个任务,做一个专题。那么我肯定用html+css+js写,但是由于我写了大半年的小程序,我已经忘记了动画怎么写,特效怎么写,甚至连单位布局都忘记了。

于是我开始百度/谷歌,像一个初学者一样,一步一个脚印。写页面的速度慢的连我自己都无法想象,一个移动端的页面,我居然调试了一天。按照以前这个复杂的页面我只需要2小时。

可怜弱小又无助。

所以记录一下技能点,以备不时之需。也许下一次写网页又是半年后了呢。

在整理的过程中,竟然发现以前理解的一些东西是错误的。

写给自己的flex笔记

关于flex是我之前一直用的布局,由于浏览器的限制,我每次写都要查询兼容模式。这次查了下canIuse,关心了下flex当前的支持程度。除了ie令人捉急,其他的没毛病。所以这次我写flex只加了-webkit-这一个前缀的兼容以防万一。

一个中年girl的技能遗忘清单——曾今理解的Flex是错误的

重点!Flex的css3数行都和这个重要的概念有关。flex一共有两根轴:main axis和cross axis,大家一般认为主轴就是水平,交叉轴就是垂直的。但是!这是错误的!请与水平垂直这两个方位的概念区分开,这是一个方位,如果说当年定义的时侯为什么不命名为vertical&horizon??原因就是main axis没有一个固定的方位,所以请不要再通过水平垂直的方位来理解了。那么主轴是怎么区分的呢?其实很简单按照当前flex的方向,是水平排列还是垂直排列。如果是水平排列(row),主轴就是水平的,交叉轴就是垂直的,反之亦然。这是一个很重要的概念。

flex容器的参数:

  • flex-direction:
    • row(从左到右默认)
    • row-reverse(从右到左)
    • column(从上到下)
    • column-reverse:(从下到上)//确认主轴的方向
  • flex-wrap(和word-warp一样控制换不换行):
    • nowrap(不换行,大家挤一挤,默认)
    • wrap(正常向下换行)
    • wrap-reverse(逆流而上换行)
  • justify-content:
    • flex-start(头)
    • flex-end(尾)
    • center(中间)
    • space-between(头尾然后中间散开)
    • space-around(有点像margin:0 XXpx的感觉)//按照主轴排列flex项目
  • align-items:
    • flex-start(头)
    • flex-end(尾)
    • center(中间)
    • baseline(基准线)
    • stretch(顶天立地);//按照交叉轴对齐flex项目

flex布局下的元素:

  • flex-shrink:0(不缩小)|1(能屈)
  • flex-grow:0(屹立不动)|>1(能伸)
  • flex-basis: 固定大小//如果使用百分比,那就是按照主轴的方位来的,如果是水平的就是宽度的%,垂直就是高度的%
  • flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ](上述三个参数的简写)

布局结构一:N个相同元素的并列

一个中年girl的技能遗忘清单——曾今理解的Flex是错误的

遇到这样的布局,尤其是移动端,我的内心是拒绝的。普通的操作是用float布局,然后%控制定义元素宽度。但是这样元素之间的间距就很难控制,一个不小心最后一个元素就会掉到第二行。这个时候我们要用新技术flex来布局,flex的弹性功能我很看好。那么这个布局的好处是什么呢?就是即使每个元素高度不一样,他也会一行一行排好,而不是像float一样,如果元素的高度又高低,那么就很容易错位。而且float也没有伸缩自如的功能。主要是我可以和margin sya goodbye!另外,注意flex换行之后,如果设置了 justify-content:space-between; ,元素之间就会自动留出相同的空隙,并且头尾紧贴。

.flexbox{
  width:320px;
  display:flex; 
  margin-bottom:30px;
}
.flex1{
  flex-wrap:wrap;
  justify-content:space-between;
  background:#444;
}
.flexbox .item{
  flex:0 0 23%;
  width:23%;
  height:80px;
  background:#eee;
  margin:10px 0;
}
复制代码

布局结构二:垂直居中

一般这种垂直居中的布局我们会用 position:absolute;top:50%;left:50%; transform:translate(-50%,-50%);/*或者margin:-xx*/ ;但是这种布局是固定的,无法伸缩自如,那么换成了flex会怎么样呢?很可惜是垂直排列换行的需求感觉效果很不错,可惜需要在一个固定的容器内。所以这里,我们可以加上flex-shink,让他收缩。同时不要加上 flex-wrap:wrap; ,不然优先换行。这样就可以实现垂直居中了。

.flex2{
  flex-direction:column;
  align-items: center;
  justify-content: space-around;
  height:320px;
}
.flex2 .item{
  margin:10px 10px;
  flex:0 1 25%;
}
复制代码
一个中年girl的技能遗忘清单——曾今理解的Flex是错误的

布局结构三:搜索框,一固定一随意伸缩

这个布局可以说是很经典,相信大家日常也在用。那么没有flex的时候我们是怎么实现的呢?一般是随意伸缩的元素宽度100%,然后利用 padding-left:固定元素的宽度px;box-size:border-box; ,预留固定的位置。然后固定的元素定位absolute定位到这个预留的位置,好了完成了。那如果是flex?一个 flex-shrink:1|flex:0 1 auto; 即可解决所有问题。

.flex3{
  align-items:center;
  flex-wrap:no-wrap;
}
.flex3 .item{
  height:40px;
  line-height:40px;
}
.flex3 .item:first-child{
  flex:0 1 100%;
}
.flex3 .item:last-child{
  flex:0 0 25%;
  margin-left:1%;
  text-align:center;
}
复制代码
一个中年girl的技能遗忘清单——曾今理解的Flex是错误的

代码链接点击这里~

可以参考的flex文章:

阮一峰老师的

a guide to flexbox

CSS 伸缩盒布局模组(W3C)

rem的计算方式

搞定了布局,我开始思考用什么单位。为了保证移动端不变性,首选rem。但是rem是怎么计算的?按了半天的计算器,我已经遗忘了rem的计算方式。毕竟小程序都是rpx,基本上就是设计稿照搬过去px变成rpx即可。

rem也就是font size of the root。他的原理,简单的说就是在html上设置字体,然后整个页面的字体基准就是来自于html的字体大小,也就是说所有的参照物都是一个,这样方便计算。至于root怎么计算的,一般就是按照设计稿的大小,如果是640px的设计稿,那么就按照640px的屏幕下是100px大小的基准来,如果是750px的设计稿,那么就按照750px下100px的基准来。这样px就不用换算了,直接除以100,就可以了。

一个中年girl的技能遗忘清单——曾今理解的Flex是错误的

想用vm,vh

然后vm的支持,还不够完美。

vm/vh是直接按照屏幕的尺寸来的,因此可以适配各种屏幕,比如我想要页面height:100%,通常做法是html,body{height:100%},这样设置之后我们才可以使用element{height:100%},但是这样会影响其他元素,也许这个页面我只是需要这一个元素100%呢?使用js也可动态控制大小,但是太麻烦了,这个时候我们就可以用height:10vh(因为1vh就是10分之一的屏幕高度),这样就是100%了。

一个中年girl的技能遗忘清单——曾今理解的Flex是错误的

字体发光效果

最近设计师很喜欢字体带有外发光的效果,这让我们很难做啊。如果是固定的字体,切图就可以了。但是如果是动态的,难道每次都切图吗。不不不,耗时耗力。这个时候text-shadow帮你打造华丽的bilingbiling效果。

当然在使用之前,我还是先查了一波canIuse,发现支持率还不错,可以放心地用了。

一个中年girl的技能遗忘清单——曾今理解的Flex是错误的

这个语法很简单,但是可以有很多玩法。如果需要做外发光地话,只需要偏移量都设置为零,然后设置模糊半径和阴影颜色即可。

text-shadow:X偏移量 Y偏移量 模糊半径 阴影颜色;
复制代码

这个属性最友爱地地方一是可以有很多阴影,二是阴影动画效果很绚丽。

.textShadowChange{
  ///...
  animation: bilingbiling 2s ease infinite alternate;
}

@keyframes bilingbiling {
  from {
  text-shadow: 0 0 1px white,
          0 0 2px white,
          0 0 4px pink,
          0 0 8px pink;
 }
  to {
  text-shadow: 0 0 5px white,
          0 0 10px white,
          0 0 18px red,
          0 0 20px red;
  }
}
复制代码

更多语法参考MDN

代码链接


以上所述就是小编给大家介绍的《一个中年girl的技能遗忘清单——曾今理解的Flex是错误的》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Python for Data Analysis

Python for Data Analysis

Wes McKinney / O'Reilly Media / 2012-11-1 / USD 39.99

Finding great data analysts is difficult. Despite the explosive growth of data in industries ranging from manufacturing and retail to high technology, finance, and healthcare, learning and accessing d......一起来看看 《Python for Data Analysis》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具