CSS flex布局遇到的一些问题

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

如上图,
盒子内,

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

解决方案:

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

2.右侧的长方形内侧由于内容过长,
导致右侧挤出父级区域
解决方案:

// 右侧挤出父级的长方形div加上
width: 0;
// 或
width: inherit;

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

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

解决方案:

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

3. flex布局内 div两端对齐

有时候我们需要两个div两侧对齐

解决方案:

// 在div1 和 div2 共同父级加上(就是设置 display:flex;那个div)
justify-content: space-between;

推荐一篇帖子给你
里面有更详细的讲解: Flex 布局教程：语法篇