vue flex布局 左右内容宽度固定 中间自适应

效果图：（最左侧盒子 及 “zuo”、“you”盒子宽度固定，中间的“1”“2”“3”随容器可视宽度变化）

 

布局结构： 

 1、父盒子开启了display：flex；则所有子元素默认开启 flex：1 1 auto；属性，即不论有没有固定宽度，宽度都会随着其他元素改变；想要固定则需要添加 flex：0 0 auto；属性。

2、想要自适应宽度的元素，设置width：auto；属性，并设置 min-width 或者 max-width 属性。flex：1；撑满容器剩余宽度。