CSS flex布局遇到的一些问题

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

如上图,

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

解决方案:

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

原因：因为父元素设置flex布局后，子元素默认可缩小（flex-shrink: 1;）

2.右侧的长方形内侧由于内容过长,

导致右侧挤出父级区域

解决方案:

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

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

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

解决方案:

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

4.flex布局内 div两端对齐

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

解决方案:

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