使用CSS样式实现表格状布局（元素的间距保持相同，换行后仍然保持相同的布局）

最新推荐文章于 2024-07-08 10:32:58 发布

前端uio

最新推荐文章于 2024-07-08 10:32:58 发布

阅读量843

点赞数 13

文章标签： css 前端 elementui less html5 css3 vue.js

本文链接：https://blog.csdn.net/weixin_52231116/article/details/139066967

版权

大家好~ 我是前端uio，本文主要使用CSS样式实现表格状布局（元素的间距保持相同，换行后仍然保持相同的布局），有什么疑问都欢迎私聊或者在评论区留言。如果需要开发web网页或者微信小程序都可以找我私聊，我会尽可能回答我了解的内容。

一、功能说明

1.最终效果

2. 使用margin进行布局（方法一）

i）先设置display，让元素水平放置

        display: flex;

ii）设置超出视图部分自动换行

        flex-wrap: wrap;

flex-wrap 是 CSS 中的一个属性，它用于定义 flex 容器中的项目如何在主轴上排列。当主轴上的空间不足以容纳所有项目时，flex-wrap 属性决定了这些项目是继续在同一行上堆叠（直到溢出），还是换行到下一行

① nowrap（默认值：项目不会换行，它们会尽可能地挤在一行内，即使这意味着一些项目会超出容器的边界

② wrap ：项目会在必要时换行到下一行，以适应容器的宽度。

③ wrap-reverse ：项目会在必要时换行到下一行，并且每一行的顺序是相反的，即最后一行显示在最上面，效果如下图所示。

iv）使用后代选择器

            &:nth-child(4n) {
                margin-right:0;
                width:  var(--img);
              }

Ⅰ &:nth-child(4n) 是CSS中的一个伪类选择器，它用于选择父元素下的第4个、第8个、第12个等每4个元素。这里的 n 代表自然数, 4n 表示4的倍数。

Ⅱ 这个选择器通常用于创建交替的网格系统或者其他重复模式的布局。例如，如果你想要在一行中间隔地给某些元素添加边框，就可以使用 &:nth-child(4n) 选择器来选中这些元素。

3.使用grid进行布局（方法二）

i）先使用display设置grid 布局

display: grid;

ii）设置grid-template-columns（假设图片宽度为350px）

		grid-template-columns: repeat(auto-fill, 350px);

① grid-template-columns是一个用于定义网格布局中列的宽度和大小的属性。repeat()函数是grid-template-columns的一个参数，它允许你指定列的模式，从而简化代码。

② repeat()函数有两个参数：第一个参数是重复次数，第二个参数是每次重复的值。

③ auto-fill作为重复次数参数，意味着浏览器会自动填充尽可能多的列，直到没有足够的空间放置完整的350像素宽的列。

④ 350px是每次重复的值，可自定义，这里表示每列的宽度是350像素。

⑤ 这种设置非常适合响应式设计，因为它允许网格布局根据视口大小自动调整列的数量，而不需要为每个元素编写单独的样式规则。

iii）自定义属性（在CSS中使用变量）

① CSS变量通过 - - 前缀来定义，可以在任何选择器内声明，并且可以从其包含的选择器范围以外的任何位置继承。变量的值可以是任何有效的CSS值

② 用法：

Ⅰ 定义变量

    --img: 350px;

Ⅱ 变量计算（使用calc()函数）

注意：

运算符前后必须有空格，例如calc（100% - 200px)，而不是calc(100%-200px)

在使用calc()时，需要确保运算符两侧的单位是兼容的。例如，你不能直接将em和px相加，因为它们是不兼容的单位。

calc(100% - var(--img))

Ⅲ JavaScript 操作变量

在这个JavaScript片段中，我们通过 document.documentElement 获取了根元素，然后使用root.style.setProperty方法来改变 - - img 变量的值。这样，所有引用- - img 的 img 元素的宽度都会更新为400像素。

// 获取根元素
const root = document.documentElement;

// 修改变量的值
root.style.setProperty('--img', '400px');

③ 优点：

Ⅰ 可维护性：当需要更改某个值时，只需修改变量的定义，所有引用该变量的地方都会自动更新，减少了手动查找和替换的工作。

Ⅱ 可读性：变量可以赋予有意义的名称，使得代码更加直观易懂。

Ⅲ 复用性：相同的值可以在多个地方重用，避免了代码重复。

Ⅳ 动态性：CSS变量可以被JavaScript动态修改，为交互式样式提供了可能。

二、主要代码

1.方法一

<template>
    <div>
      <div class="logo-content">
        <div class="logo">
          <div v-for="item in 33" :key="item" class="imgBox">
            <img src="../../../assets/image/test/test1.jpeg" class="img">
          </div>
        </div>
      </div>
    </div>
  </template>
  <style scoped lang="less">
  .logo-content {
    margin-left: 80px;
    margin-bottom: 20px;
      .logo {
        display: flex;
        flex-wrap: wrap;
        width: 100%;

          .imgBox {
            --gap: 100px;
            --img: 350px;
            &:nth-child(4n) {
                margin-right:0;
                width:  var(--img);
              }
              .img {
                width:  var(--img);
                margin-right:var(--gap); 
  
            }
          }

      }
  }
  </style>

2.方法二

<template>
  <div>
    <div class="logo-ontent">
      <div class="logo">
        <div v-for="item in 33" :key="item">
          <img src="../assets/logo.jpeg" class="img">
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less">
.logo-ontent {
	margin: 20px;
	.logo {
		display: grid;
		justify-content: center;
		align-content: center;
		grid-template-columns: repeat(auto-fill, 350px);
		gap: 100px; /* 调整这个值来控制间距 */
		.img {
			width: 350px;
		}
	}
}
</style>