flex-grow带来的排版问题

图片变形问题

flex布局中，当一个元素定义了flex-grow，而其他元素没定义flex-grow时，可能会将其他元素挤压变形。这时给其他元素添加一下css样式：

　　　　flex-shrink：0；

可以解决这个问题

省略号问题

在flex布局的大容器A中并排放置两个子容器，并且子容器设置flex:1，子容器中都有一个元素包含一段文本，这段文本设置了不换行并且显示省略号的样式，当文本过长的时候，子容器会被撑开，这里的text-overflow: ellipsis;不生效，省略号没有出现，并且过长的文字将子容器撑开，问题可能出在于子容器没有设置宽度，省略符可能需要对父元素设置宽度，设置为100%无效，当设置为0的时候，省略号出现了。因为不设置宽度，子容器会被文本节点无限撑开，通过测试发现，也可以设置子容器overflow:hidden满足效果。