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

背景

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

示意图

解决前
解决后

知识点

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

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

解决办法

<template>
  <div>
    <div class="flex">
      <div v-for="(itm, inx) in lst"
           :key="inx"
           class="item">
        <i class="icon"
           :class="{'male': itm.sex===0,'female': itm.sex===1}"></i>
        <span>{{itm.name}}</span>
      </div>
    </div>
  </div>
</template>

<script>
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 }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.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;
    }
  }
}
</style>

总结

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

饮水思源

• flex布局教程