分享实际开发中的flex实例

一、如何使flex内的div不保持100%的宽度

<div class="black">
  <div class="brown"></div>
  <div class="pink"></div>
  <div class="purple"></div>
</div>

<style scope lang="scss">
  .black {
    display: flex;
    flex-direction: column;
      .purple {
        align-self: flex-start;
      }
  }
</style>

二、如何使元素不会受到缩放挤压

效果：在黑色div宽度缩小的时候，紫色div宽度不变

<div class="black">
  <div class="purple"></div>
  <div class="blue"></div>
</div>

<style scope lang="scss">
  .black {
    display: flex;
    .purple {
      flex-shrink: 0;
    }
  }
</style>

三、如何实现类似9宫格或更多格数的菜单样式

<template>
  <div class="fatherMenu">
    <div class="fatherMenu-title">
      <span>Menu</span>
      <span @click="$router.push({name: 'more'})">more-></span>
    </div>
    <div class="fatherMenu-content">
      <ul class="children-ul">
        <li class="children-ul-li" v-for="item in list" :key="item.id">
          <div class="innerBox" @click="$router.push(item.appUrl)">
            <img :src="item.imageUrl" />
            <span>{{ item.appName }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>

export default {
  name: "demoPage",
  data() {
    return {
      list: [
        { id: 1, appUrl: '1', imageUrl: require('../../assets/logo.png'), appName: '1' },
        { id: 2, appUrl: '2', imageUrl: require('../../assets/logo.png'), appName: '2' },
        { id: 3, appUrl: '3', imageUrl: require('../../assets/logo.png'), appName: '3' },
        { id: 4, appUrl: '4', imageUrl: require('../../assets/logo.png'), appName: '4' },
        { id: 5, appUrl: '5', imageUrl: require('../../assets/logo.png'), appName: '5' },
        { id: 6, appUrl: '6', imageUrl: require('../../assets/logo.png'), appName: '6' },
        { id: 7, appUrl: '7', imageUrl: require('../../assets/logo.png'), appName: '7' },
        { id: 8, appUrl: '8', imageUrl: require('../../assets/logo.png'), appName: '8' },
        { id: 9, appUrl: '9', imageUrl: require('../../assets/logo.png'), appName: '9' },
      ]
    }
  }
}
</script>


<style scope lang="scss">
  .fatherMenu {
    margin: 100px auto 0px;
    padding: 10px;
    width: 800px;
    border-radius: 8px;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.7);
    /** height不用设置，用里面的子元素撑起来 */
    &-title {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid rgba(0, 0, 0, 0.7);
    }
    &-content {
      width: 100%;
      .children-ul {
        width: 100%;
        display: flex;
        flex-wrap: wrap;  /** 让里面的li可以换行 */
        &-li {
          /**
          *  li充当一个隐形的很规范的框架，正正方方
          *  它的宽度必须均分100%，我们画9宫格就是：33.333,%，画16宫格就是：25%
          */
          width: 33.333%;
          height: 100px;
          display: flex;
          align-items: center;
          justify-content: center;
          .innerBox {
            /**
            *  这里套上一层div，目的是让用户的有效点击区域变得更精细一点，
            *  因为click事件要放在这一层dom上，不能让用户点到li的间隔区域也触发click事件，
            *  这样去限制之后，用户只有把鼠标放在图片和名称上，才能click点击跳转。
            *  宽度根据下面的app名称长度来填写，比如4字我们就给4字的宽度，这样更精确，
            *  我这里就给一个和图片一样的长度做参考。
            */
            width: 50px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            > img {
              width: 50px;
              height: 50px;
            }
            > span {
              font-size: 16px;
            }
          }
        }
      }
    }
  }
</style>

 我们把这个文件放进vsCode中，就得到：