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

相关推荐
汤姆yu20 小时前
基于python的化妆品销售分析系统
开发语言·python·化妆品销售分析
ScilogyHunter20 小时前
C语言标准库完全指南
c语言·开发语言
sali-tec20 小时前
C# 基于halcon的视觉工作流-章52-生成标定板
开发语言·图像处理·人工智能·算法·计算机视觉
应茶茶21 小时前
C++11 核心新特性:从语法重构到工程化实践
java·开发语言·c++
学习笔记10121 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-194321 小时前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
程子的小段21 小时前
C 语言实例 - 字符串复制
c语言·开发语言
-森屿安年-21 小时前
STL 容器:stack
开发语言·c++
曹牧21 小时前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台21 小时前
海龟交易系统R
前端·人工智能·r语言