前端开发常见问题

1. flex布局遇到的遮挡问题

     情景描述：定高容器用flex布局，垂直水平居中，存在的首次渲染数据遮挡问题

<template>
  <div class="flex flex_container">
     <div
          class="item"
          v-for="(item, index) in list"
          :key="index"
      >
            {
  
  { item }}
      </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      list:['春风','细雨','暖阳','冷月','秋风','冬阳','夏雨']
    };
  }
};
</script>
<style scoped>
.flex{
    height: 100px;
    background-color: cornflowerblue;
    color: #555;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-y: scroll;
}
.flex .item{
   line-height:30px;
}
</style>

 滚动可看到'冬阳','夏雨'；数据'春风','细雨'消失了

 解决思路：数据少时保留justify-content:center;数据较多时去掉justify-content;
 

<template>
  <div :class="list.length>3?'flex':'flex center'">
     <div
          class="item"
          v-for="(item, index) in list"
          :key="index"
      >
            {
  
  { item }}
      </div>
  </div>
</template>

<script>

export default {
  data() {
    return {