网页中使用flex 布局

1、css善用容器{ display: flex; align-items: center; } 可以让容器内的填充物水平居中排列。

学习推荐：

https://www.runoob.com/w3cnote/flex-grammar.html

 

2、因为设置了display: flex; 导致block布局变成了flex布局， 所以在子元素宽度没有被撑破的情况下，子元素宽度是有效的，但是当子元素内容过多，此时宽度会比实际宽度小，所以如果想要在已经设置了flex布局的基础上，再进行子元素宽度的设置，给子元素添加固定宽度：

width: 120px;
flex-shrink: 0;