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

相关推荐
小龙报几秒前
《算法通关指南---C++编程篇(2)》
c语言·开发语言·数据结构·c++·程序人生·算法·学习方法
古一|16 分钟前
Vue3中ref与reactive实战指南:使用场景与代码示例
开发语言·javascript·ecmascript
peachSoda718 分钟前
封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)
前端·javascript·微信小程序·小程序
宠友信息28 分钟前
java微服务驱动的社区平台:友猫社区的功能模块与实现逻辑
java·开发语言·微服务
@PHARAOH30 分钟前
HOW - 浏览器兼容(含 Safari)
前端·safari
驰羽35 分钟前
[GO]golang接口入门:从一个简单示例看懂接口的多态与实现
开发语言·后端·golang
undefined在掘金3904141 分钟前
flutter 仿商场_首页
前端
少卿41 分钟前
react-native图标替换
前端·react native
熊猫钓鱼>_>1 小时前
TypeScript前端架构与开发技巧深度解析:从工程化到性能优化的完整实践
前端·javascript·typescript
ii_best1 小时前
IOS/ 安卓开发工具按键精灵Sys.GetAppList 函数使用指南:轻松获取设备已安装 APP 列表
android·开发语言·ios·编辑器