CSS实现等距排列：一行多个或多行多个

在CSS中，我们经常需要将多个元素等距排列，尤其是在响应式布局中。通过动态控制列数和间距，我们可以实现灵活的布局。以下以一个包含10个项目的示例为例，展示如何实现每行显示5个项目，当然，你也可以根据需求调整显示的数量。

HTML结构：

 1 <div class="list">
 2     <div class="item">01</div>
 3     <div class="item">02</div>
 4     <div class="item">03</div>
 5     <div class="item">04</div>
 6     <div class="item">05</div>
 7     <div class="item">06</div>
 8     <div class="item">07</div>
 9     <div class="item">08</div>
10     <div class="item">09</div>
11     <div class="item">10</div>
12 </div>

在实际应用中，.item中可能包含更多的内容，这里我们用数字来代表不同的项目。

scss代码：

使用 Flexbox 实现等距排列

 1 :root {
 2     --theme-color: #ffe4c4;
 3     --theme-shadow-color: rgba(0, 0, 0, .9);
 4     --flex-list-col-num: 5; /* 列与列之间的间距 */
 5     --flex-list-column-gap: 1em; /* 列与列之间的间距 */
 6 
 7     // --flex-width: calc(100% / var(--flex-list-col-num) - (var(--flex-list-column-gap) * calc(var(--flex-list-col-num) - 1) / var(--flex-list-col-num)));
 8 
 9     /* 更优写法（数学等价简化版） */
10     --flex-width: calc((100% - var(--flex-list-column-gap) * (var(--flex-list-col-num) - 1)) / var(--flex-list-col-num));
11 }
12 
13 .list {
14     display: flex;
15     flex-wrap: wrap;
16     gap: var(--flex-list-column-gap);
17 
18     .item {
19         width: var(--flex-width);
20         min-height: 200px;
21         background-color: var(--theme-color);
22         box-shadow: 0 0 10px var(--theme-shadow-color);
23 
24         display: flex;
25         align-items: center;
26         justify-content: center;
27     }
28 }

 

说明：

  • --flex-list-col-num 控制每行显示多少个项目，可以通过修改这个值来调整每行的列数。

  • --flex-list-column-gap 控制项目之间的间距。

  • 通过 calc() 函数动态计算每个项目的宽度，使得它们自动适应不同的屏幕宽度。

这种方法的优势是，当你需要调整布局时，只需修改两个变量 --flex-list-col-num 和 --flex-list-column-gap，大大减少了重复代码的编写。

使用 Grid 实现等距排列

除了Flexbox，CSS Grid也可以非常方便地实现等距排列。以下是通过Grid布局实现相同效果的代码：

 1 .list {
 2     display: grid;
 3     grid-template-columns: repeat(var(--flex-list-col-num), 1fr);
 4     gap: var(--flex-list-column-gap);
 5 
 6     .item {
 7         min-height: 200px;
 8         background-color: var(--theme-color);
 9         box-shadow: 0 0 10px var(--theme-shadow-color);
10 
11         display: flex;
12         align-items: center;
13         justify-content: center;
14     }
15 
16 }

 说明：

  • grid-template-columns: repeat(var(--flex-list-col-num), 1fr) 让每个项目占据相等的空间，且列数由 --flex-list-col-num 控制。1fr 亦可换成 var(--flex-width) 控制宽度

  • gap 属性用于设置项目之间的间距。

通过灵活地调整 --flex-list-col-num 和 --flex-list-column-gap，你可以轻松控制每行显示多少个项目及其间距，无论是使用Flexbox还是Grid布局，效果都非常简洁且可控。这对于响应式设计尤其重要，能大大减少代码量并提升开发效率。

 

posted @ 2025-06-30 10:42  彡文彡  阅读(102)  评论(0)    收藏  举报