工作总结

@浅谈flex布局

最近踩的坑有点多，先简单总结一下
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