Flex布局学习笔记

flex布局
flex布局

本文是根据阮老师的博客《Flex布局教程:语法篇》汇总的,便于以后自己查阅。另外阮老师还有一篇讲解很经典的flex布局实战博文《Flex布局教程:实例篇》。

flex容器有6个属性

  • flex-direction:决定主轴的方向(即项目的排列方向)。
    • row(默认值):主轴为水平方向,起点在左端。
    • row-reverse:主轴为水平方向,起点在右端。
    • column:主轴为垂直方向,起点在上沿。
    • column-reverse:主轴为垂直方向,起点在下沿。
  • flex-wrap:定义,如果一条轴线排不下,如何换行。
    • nowrap(默认):不换行。
    • wrap:换行,第一行在上方。
    • wrap-reverse:换行,第一行在下方。
  • flex-flow:是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
  • justify-content:定义了项目在主轴上的对齐方式。
    • flex-start(默认值):左对齐
    • flex-end:右对齐
    • center: 居中
    • space-between:两端对齐,项目之间的间隔都相等。
    • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
  • align-items:定义项目在交叉轴上如何对齐。
    • flex-start:交叉轴的起点对齐。
    • flex-end:交叉轴的终点对齐。
    • center:交叉轴的中点对齐。
    • baseline: 项目的第一行文字的基线对齐。
    • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
  • align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
    • flex-start:与交叉轴的起点对齐。
    • flex-end:与交叉轴的终点对齐。
    • center:与交叉轴的中点对齐。
    • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
    • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
    • stretch(默认值):轴线占满整个交叉轴。

flex中项目有6个属性(项目:item)

  • order:定义项目的排列顺序。数值越小,排列越靠前,默认为0。
  • flex-grow:定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
  • flex-shrink:定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效。
  • flex-basis:定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。如果值为100%,表示整个轴线长度空间
  • flex:是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
  • align-self:允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

Reference

javascript的apply()和call()

作为业务的前端开发,有时候看一些代码的时候碰到apply和call方法会觉得很纳闷,好好的一个函数执行,非要写成这样,看了网上的一些事例代码还是没真正理解其不得不用的场景。直到最近自己碰到一个不得不用apply方法的场景,才真正理解了apply和call的作用。

直接看代码:

在这段代码里面,我达到的目的是:通过传递worker对象的make方法的方式来让boss选择生产出那种产品,boss的chooseWorker方法的参数是make方法。我本来期望传给chooseWorker方法的参数如果是foodWorker的make方法就生产food,如果是carWorker的make方法就生产carWorker。期望的结果是这样:

但是结果并不是这样,而是:

那为什么我传递的是指定对象的方法,里面的this.product确实“house”呢?

原因是JavaScript对象的函数本身并不包含对象的信息的信息,如果直接调用makeFunction,其调用方默认是window对象,也就是说this==window,所以this.product就是“house”了。要想达到预想的效果,就得用到apply方法了。比如这样:

其输出结果就打到预期了,对于一些设计模式和继承使用的时候,apply和call会常被使用到。主要是解决this对象的指向问题,当然也可以通过使用apply和call来替换方法的调用者。

apply和call的作用基本相同,唯一的区别是apply有两个参数,而call只有一个参数。

  • apply的第一个参数是函数的调用对象,第二个参数是函数的参数列表(参数数组),上面的代码就是个例子。当然如果函数没有参数,可以给apply方法传空数组([]);
  • call的参数只有一个,就是函数的调用对象。

apply包含了call的功能,所以一般用apply就行了。这是我目前的理解,抛砖引玉。

 

优秀的IT技术网站收集

技术开发相关的网站很多,信息多得看不过来,很多优秀的技术网站和博客很难出现在搜索引擎的第一二页,而且很多好的原创文章都是英文的,干货实在是太多了,下面列举了一下:

1. jquery插件库

http://www.jq22.com/

2. spring框架官方文档

http://docs.spring.io/spring-framework/docs/current/spring-framework-reference/html/

3. 一个不错的java文章网站

http://www.jayway.com/category/java/page/2/

4. java相关的比较有深度的网站

http://www.importnew.com/

5. 开发者头条,开发者的重要资讯

http://toutiao.io/

6. 慕课网,免费学习各种IT技能

http://www.imooc.com/course/list

7. 在线css编辑网站

http://enjoycss.com/

8. java代码搜索网站

http://grepcode.com/

9. jar包搜索网站

http://www.findjar.com/

10. 各编程语言性能对比网站

http://benchmarksgame.alioth.debian.org/u64q/compare.php?lang=java&lang2=go

11. 开源中国的在线工具集和API文档集合,太全面了

http://www.ostools.net/

12. 一个很牛叉的java技术网站(英文的)

http://www.theserverside.com/?asrc=TAB_TheServerSideCOM

13. 一个很不错的java技术网站(英文的)

http://examples.javacodegeeks.com/

14. 一个技术干货很多的额博客

http://ifeve.com/

15. 最新最前沿的java技术咨询

http://www.javaworld.com/

16. 这里汇集了100个的牛x的java技术博客(英文的)

http://www.programcreek.com/2012/11/top-100-java-developers-blogs/

17. 查看html标签、js对象方法、css属性、SVG等浏览器兼容性的网站,可快速答疑解惑

http://caniuse.com/

这里只列举了我收藏的一些网站,欢迎添加其他不错的网站。

input不能输入空格解决方法

最近发现页面中一个有suggest功能的input不能输入空格(这个input的suggest功能用到了bootstrap的dropdown功能),但是可以输入其他的字符,非常奇怪,我自己的js代码里面根本没有对输入做过任何的处理,而且输入空格时文本框中的内容没有任何变化。

只能猜测可能是其他的js中对所有的dropdown功能的input都做了按键监听和屏蔽。

无耐之下,用排除法,一个个的把页面中引入的js移除,查看输入框能否输入空格,经测试发现当删除了bootstrap的js引入后,input就可以输入空格了,说明问题在bootstrap.js里面,所以进到源码里面看了看,发现版本是v3.3.0,因此试试最新的版本v3.3.2,替换最新的版本后,恢复正常了。然后用svn的diff功能看了下两个版本源码中的区别,发现v3.3.2中修复了v3.3.0中的这个bug,增加了一个判断条件把文本框类型的控件过滤掉了。如下图:

bootstrap的bug:input不能输入空格
bootstrap的bug:input不能输入空格

参考ASCII表,空格的ascii码是32,还有三个按键也被屏蔽了,分别是:&、(、escape键。v3.3.0中的代码可以看到,如果是空格、&、(、escape键这4个按键中的任何一个,则执行:

e.preventDefault()
e.stopPropagation()

也就是说如果按的是上面的4个按键中的任何一个,就阻止这个事件的默认行为,所以文本框中的内容没有变化。v3.3.2版本中增加了一个控件tagName的判断,如果是input或者textarea就不做上面的阻止行为。这样正好解决了问题。

结论是:bootstrap v3.3.0里面的bug,bootstrap升级到最新的3.3.2就可以了。

如何自定义eclipse代码格式化(Ctrl+Shift+F)

使用eclipse的都知道它有一个快捷键Ctrl+Shift+F,用来格式化代码,但是eclipse默认自带的格式化效果也有不完美的地方。所以有时候你需要自定义eclipse代码格式化,下面举例说明:

java代码的多个属性默认情况是左对齐的,看起来效果是层次不齐的,见下图:

java代码格式化——多个属性层次不齐
java代码格式化——多个属性层次不齐

如果对齐是什么样的效果呢:

eclipse java代码格式化——多个属性对齐
eclipse java代码格式化——多个属性对齐

那如何配置,其实eclipse自带了完整而全面的配置功能,进入路径为:Preferences–>Java–>Code Style–>Formatter–>New(取个自己想要的名字)–>右边的Edit,这个界面里面有丰富的java代码格式化配置功能,上图的配置就只需要把Indentation中的Align field in columns勾上即可。其他的一些配置都可以在这里找到,而且该界面提供了丰富的所见即所得的配置效果,大家可以玩一玩,或许有意想不到的效果。如下图:

eclipse java代码格式化——配置界面
eclipse java代码格式化——配置界面

如果是J2EE版的eclipse,那么它还自带了HTML、JS、CSS的代码格式化配置功能。如下图中的路径:

eclipse代码格式化——js、css、html
eclipse代码格式化——js、css、html

上图,将input从inline Elements中移除,那么input就会单独占用一行,这样可以避免input被中途换行的情况,另外,可以将Line width调大一点,比如:100,这样,就不会有那么多的换行了。代码就比较容易在格式化后,仍然是你想要的效果。

 

chrome开发者工具快捷键

按F12打开chrome的开发者工具,点一下开发者工具,然后按F1,就会弹出开发者工具快捷键指南,这个指南里面包含了所有的chrome开发者工具快捷键,这给平时前后端开发的同学带来的不少便捷。如下图:

chrome开发者工具快捷键
chrome开发者工具快捷键

打开chrome开发者工具的快捷键除了F12外,还有几个:

  • Ctrl+Shift+I  等同于F12,打开chrome开发者工具
  • Ctrl+Shift+J   打开chrome开发者工具,并把tab定位到Console上
  • Ctrl+Shift+C   打开chrome开发者工具,并把tab定位到Element上,同时把Element定位到鼠标光标所在页面的位置  (这个快捷键超有用)
  • Ctrl+Shift+Delete  打开清楚缓存的设置界面

当然还有一些操作chrome的常用快捷键,详见: