CSS flex布局遇到的一些问题

1.flex布局内 固定宽高盒子会被挤小问题

如上图, 盒子内左侧的方形的div原本是固定宽高的, 可是设置flex布局后却被右边的盒子给挤小了

解决方案:

// 给被挤的方形div加上
flex-shrink: 0;

2.flex布局内 自适应部分不自动延长

如上图,div2的效果明显不是我们想要的,我们往往希望它自动延长到父级盒子的最右侧,就像上面第一个图片效果一样

解决方案:

// 在div2 加上
flex-grow: 1;