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

20181123技能遗忘清单

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

写给将来的本身，也许几个礼拜，也许几年。

今天忽然接到一个任务，作一个专题。那么我确定用html+css+js写，可是因为我写了大半年的小程序，我已经忘记了动画怎么写，特效怎么写，甚至连单位布局都忘记了。

因而我开始百度/谷歌，像一个初学者同样，一步一个脚印。写页面的速度慢的连我本身都没法想象，一个移动端的页面，我竟然调试了一天。按照之前这个复杂的页面我只须要2小时。

可怜弱小又无助。

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

在整理的过程当中，居然发现之前理解的一些东西是错误的。

写给本身的flex笔记

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

重点！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个相同元素的并列

遇到这样的布局，尤为是移动端，个人心里是拒绝的。普通的操做是用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%;
}
复制代码

布局结构三：搜索框，一固定一随意伸缩

这个布局能够说是很经典，相信你们平常也在用。那么没有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;
}
复制代码

代码连接点击这里~

能够参考的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，就能够了。

想用vw，vh

而后vw的支持，还不够完美。

vw/vh是直接按照屏幕的尺寸来的，所以能够适配各类屏幕，好比我想要页面height：100%，一般作法是html,body{height:100%}，这样设置以后咱们才可使用element{height:100%}，可是这样会影响其余元素，也许这个页面我只是须要这一个元素100%呢？使用js也可动态控制大小，可是太麻烦了，这个时候咱们就能够用height：100vh（由于1vh就是100分之一的屏幕高度），这样就是100%了。

字体发光效果

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

固然在使用以前，我仍是先查了一波canIuse，发现支持率还不错，能够放心地用了。

这个语法很简单，可是能够有不少玩法。若是须要作外发光地话，只须要偏移量都设置为零，而后设置模糊半径和阴影颜色便可。

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地记忆力也是没谁了。

ps：感谢processon这么好的做图工具，加速了个人写做过程。