学习和使用flexbox布局

是时候好好学习flex布局了,之前的开发经验主要集中在web pc端开发,现在主要集中在H5页面的开发,既然H5基本都支持flex布局,为什么不熟练使用呢?这里借用下阮老师的图,我也自己谢谢学到的flex布局的知识,作为补充。

flex布局-haomou.net

知识运用:

 

垂直居中:

记得上次我写个垂直居中,由于图标的形状看起来偏下一些,所以用了margin/top+relative的方式来写,结果H5下面出了一堆兼容的问题,后来还是改成vertical-align的方式来写。同一父元素下所有子元素如果都是inline-block,那么采用vertical-align是比较好的垂直居中方式,当然vertical-align的值需要都是middle即可。

 

参考文献:

  1. Flex 布局教程:语法篇:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
  2. Flex 布局教程:实例篇:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

未经允许不得转载:皓眸大前端 » 学习和使用flexbox布局

赞 (1)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址