css挤掉,flex布局元素被挤掉的解决办法

背景

使用flex写列表时遇到的前面块的布局被挤掉，遇到各种大坑小坑，有人说使用overflow: hidden等解决找了一堆，最终解决办法还是研究一下flex的文档才发现这个属性！

示意图

解决前

解决后

知识点

flex-shrink

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {

flex: none | [ ? || ]

}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

解决办法

:key="inx"

class="item">

:class="{'male': itm.sex===0,'female': itm.sex===1}">

{{itm.name}}

export default {

name: 'flex',

data () {

return {

lst: [

{ name: '杨过', sex: 0 },

{ name: '小龙女', sex: 1 },

{ name: '大雪山大轮寺大轮明王吐蕃国师鸠摩智', sex: 0 },

{ name: '黄蓉', sex: 1 },

{ name: '郭襄', sex: 1 },

{ name: '杨康', sex: 0 }

]

}

}

}

.flex {

width: 200px;

margin: 100px auto;

border: 1px solid #cccccc;

padding: 10px;

.item {

display: flex;

justify-items: start;

align-items: center;

overflow: hidden;

.icon {

display: inline-block;

width: 16px;

height: 16px;

background-repeat: no-repeat;

flex-shrink: 0;

}

.male {

background: url("../assets/images/icon-male.png");

}

.female {

background: url("../assets/images/icon-female.png");

}

span {

padding-left: 5px;

white-space: nowrap;

flex: 1;

}

}

}

总结

解决不了问题时应该静下心来仔细阅读相关文档语法规则，而不是盲目的网上找解决方案！

饮水思源