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自适应

相关推荐
心愿许得无限大4 分钟前
Qt 常用界面组件
开发语言·c++·qt
2401_8582861114 分钟前
OS15.【Linux】gdb调试器的简单使用
linux·运维·服务器·开发语言·gdb
牛马baby15 分钟前
MATLAB下载安装教程(附安装包)2025最新版(MATLAB R2024b)
开发语言·matlab
山有木兮木有枝_18 分钟前
JavaScript 设计模式--单例模式
前端·javascript·代码规范
shenyan~24 分钟前
关于 c、c#、c++ 三者区别
开发语言·c++
一大树32 分钟前
Vue3 开发必备:20 个实用技巧
前端·vue.js
Ashlee_code36 分钟前
什么是Web3?金融解决方案
开发语言·金融·架构·eclipse·web3·区块链·php
颜渊呐37 分钟前
uniapp中APPwebview与网页的双向通信
前端·uni-app
Evand J1 小时前
【MATLAB例程】AOA与TDOA混合定位例程,适用于三维环境、4个锚点的情况,附下载链接
开发语言·matlab
机器视觉知识推荐、就业指导1 小时前
Qt 与Halcon联合开发八: 结合Qt与Halcon实现海康相机采图显示(附源码)
开发语言·数码相机·qt