CSS初级项目如何实现响应式图标布局_Flex与媒体查询结合

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

CSS初级项目如何实现响应式图标布局_Flex与媒体查询结合

2025-11-21

浏览次数：次

返回列表

使用 Flexbox 和媒体查询实现响应式图标布局，.icon-container 采用 flex 布局并设置 flex-wrap: wrap 与 gap 间距，结合 justify-content: space-around 实现均匀分布；通过 @media 查询在不同屏幕尺寸下调整显示效果：≥1024px 每行6个，768px~1023px 每行最多4个，适配移动端。

css初级项目如何实现响应式图标布局_flex与媒体查询结合

要实现一个响应式图标布局，关键在于使用 Flexbox 布局控制图标的排列，并结合媒体查询适配不同屏幕尺寸。这种方式简单高效，适合 CSS 初学者上手实战项目。

使用 Flexbox 创建基础图标布局

Flexbox 能让容器内的子元素自动对齐和分配空间，非常适合图标这类等宽或自适应的布局需求。

假设我们有一组图标（可以用 font-awesome 或 SVG 图标），HTML 结构如下：

<div class="icon-container">
  <div class="icon"><i class="fa fa-home"></i></div>
  <div class="icon"><i class="fa fa-user"></i></div>
  <div class="icon"><i class="fa fa-cog"></i></div>
  <div class="icon"><i class="fa fa-envelope"></i></div>
  <div class="icon"><i class="fa fa-heart"></i></div>
  <div class="icon"><i class="fa fa-star"></i></div>
</div>

用 Flex 让图标在一行中均匀分布：

.icon-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px;
  gap: 15px;
}
<p>.icon {
font-size: 24px;
width: 60px;
height: 60px;
background-color: #f0f0f0;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s;
}</p><p>.icon:hover {
background-color: #ddd;
}</p>

说明： flex-wrap: wrap 允许换行，gap 控制间距，justify-content: space-around 使图标平均分布。

Waifulabs

一键生成动漫二次元头像和插图

317 查看详情 Waifulabs

通过媒体查询适配不同设备

为了让布局在手机、平板和桌面都有良好表现，加入媒体查询调整每行显示数量。

大屏（≥1024px）：每行显示 6 个图标
平板（768px ~ 1023px）：每行最多 4 个
手机（

CSS 媒体查询代码如下：

/* 平板 */
@media (max-width: 1023px) and (min-width: 768px) {
  .icon-container {
    justify-content: space-between;
  }
  .icon {
    width: 70px;
    height: 70px;
    font-size: 28px;
  }
}
<p>/<em> 手机 </em>/
@media (max-width: 767px) {
.icon-container {
justify-content: center;
}
.icon {
width: 60px;
height: 60px;
font-size: 20px;
}
.icon-container .icon {
margin: 10px;
}
}</p>