你不知道的flex布局

1.父级元素设置为flex布局后，子元素的float、clear、vertical-align属性都会失效。所以要设置完flex，再布局子元素。

2.父级元素设置为flex布局后，所有的子元素都变成了行内块元素。对行内元素影响大。

3.align-items要有具体高度才能生效。如果只是给body设置100%高度，则失效。

因为body继承的是html，而html的高度是0。要给html也加上100%继承浏览器视口的高度。

html, body{

    height: 100%;

} 

或者： 

body:{

    height: 100vh;

}

4.flex默认是nowrap，是在一行排列，与你设置的子元素的宽度无关，flex会自动缩小子元素的宽度。要设置换行，则给父元素加上：

flex-wrap: wrap;