flex自适应页面

javascript 复制代码
<template>
  <div id="fb-content" :style="{ padding: '0 ' + boxPadding + 'px' }">
    <div
      v-for="(item, index) in props['boxList']"
      :key="index"
      :style="{ width: 100 / boxNum + '%' }"
    >
      <div style="display: flex; justify-content: center">
        <slot name="box" :item="item"></slot>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { defineProps, onMounted, ref } from 'vue';
  const props = defineProps({
    boxWidth: {
      type: Number,
      default: 1,
    },
    gap: {
      type: Number,
      default: 1,
    },
    boxList: {
      type: Object,
    },
  });
  const boxNum = ref(0);
  const boxPadding = ref(0);
  onMounted(() => {
    init();
    window.addEventListener('resize', () => {
    //监听页面变化
      init();
    });
  });
  function init() {
    let dom = document.getElementById('fb-content');
    let contentWidth = dom?.clientWidth || dom?.offsetWidth || 1;
    boxNum.value = contentWidth
      ? parseInt((contentWidth - props['gap']) / (props.boxWidth + props['gap']))
      : 1;
    boxPadding.value = parseInt(
      (contentWidth - (props['boxWidth'] + props['gap']) * boxNum.value) / 2,
    );
  }
</script>
<style lang="less">
  #fb-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
</style>

间距固定,左右padding自适应

相关推荐
前端小万19 小时前
一次紧急的现场性能问题排查
前端·性能优化
一只乔哇噻19 小时前
java后端工程师进修ing(研一版 || day41)
java·开发语言·学习·算法
钮钴禄·爱因斯晨20 小时前
深入剖析LLM:从原理到应用与挑战
开发语言·人工智能
excel20 小时前
为什么相同卷积代码在不同层学到的特征完全不同——基于 tfjs-node 猫图像识别示例的逐层解析
前端
知识分享小能手20 小时前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
用户214118326360220 小时前
dify案例分享-免费玩转即梦 4.0 多图生成!Dify 工作流从搭建到使用全攻略,附案例效果
前端
CodeSheep20 小时前
稚晖君又开始摇人了,有点猛啊!
前端·后端·程序员
JarvanMo20 小时前
Flutter Web vs Mobile:主要区别以及如何调整你的UI
前端
六点半88820 小时前
【C++】C++11 篇二
开发语言·c++
DDDDDDDRDDR20 小时前
C++容器:list
开发语言·c++·stl