最近踩的坑有点多,先简单总结一下
1、componentDidUpdate有三个形参,就算只用prevState,也要把不用的nextProps带着,这点可以参考函数的形参用法。
2、华为mate30 pro在有图片时,document.body.scrollTop || document.documentElement.scrollTop值会多出,这个原因没找到
3、flex布局,flex属性的用法
flex布局
工作半年多以来,style基本都是用flex布局,但大多使用基础的一些属性,导致遇到问题,不能及时解决。印象最深的就是上周使用flex布局时,很多字体重叠在一起,或者一些div块被挤变形,这大概率是flex布局没生效,需要我们设置flex的属性值。
一、flex布局的概念
flex布局,也叫弹性盒子,顾名思义,可以根据内容撑开div,flex只有在div块大于屏幕的宽高时,才会生效。任何块都可以设置display: flex,也是最普遍的写法,行内也可以设置diaplay:inline-flex。兼容性也很好,大多浏览器都适用。
二、flex布局的属性
父div属性
- flex-direction
- justify-content
- align-items
- flex-wrap
- flex-flow
- align-content
子item属性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
其中,flex 是flex-grow flex-shrink flex-basis 的简写。该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
代码中,flex:1也比较常见。左右两栏布局时,左侧给定width,右侧flex:1,可以实现左侧宽度固定,右侧填满的效果。
参考 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html