（转）flex布局换行后间隙问题

最新推荐文章于 2025-06-12 15:54:24 发布

原创最新推荐文章于 2025-06-12 15:54:24 发布 · 8.8k 阅读

21 ·

CC 4.0 BY-SA版权

CSS 同时被 2 个专栏收录

81 篇文章

订阅专栏

布局

3 篇文章

订阅专栏

本文详细介绍了如何通过调整CSS align-content属性解决Flex布局中换行后的间距问题，通过实例演示了stretch、center、flex-end和空间分布的不同效果，并提供了相关解决思路和参考链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

今天遇到flex布局换行后产生间隙的问题，本来预期得到以下结果

pre.PNG

具体实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex布局换行后间隙问题</title>
  <style>
    html,body{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .content {
      width: 380px;
      height: 200px;
      border: 1px solid #D54040;
      border-radius: 4px;
      box-sizing: border-box;
      padding: 4px 0;
      display: flex;
      flex-wrap: wrap;
    }  
    .name {
      width: 58px;
      height: 22px;
      border: 1px solid #0000ff;
      background: rgba(0, 0, 255, 0.15);
      margin-left: 10px;
      margin-top: 10px;
      line-height: 22px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="content">
    <span class="name">张三</span>
    <span class="name">李四</span>
    <span class="name">王五</span>
    <span class="name">赵六</span>
    <span class="name">孙七</span>
    <span class="name">周八</span>
    <span class="name">郑十一</span>
    <span class="name">张三</span>
    <span class="name">李四</span>
  </div>
</body>
</html>

得到如下结果：

act.PNG

解决方法

其实解决方法很简单，只需要在父元素这里是class为content的元素上加入

align-content: flex-start;

分析

出现该问题主要是因为在css学习过程中对于弹性盒子布局，对于align-content属性的强调相较于其他属性比较弱。align-content属性的默认值为stretch，所以会有第二行伸展的情况产生，具体align-content用法可以去看官方文档，这里不赘述。

针对该实例对align-content属性进行简单实践

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

align-content: center;

center.PNG

align-content: flex-end;

flex-end.PNG

align-content: space-between;

space-between.PNG

align-content: space-around;

space-around.PNG

问题解决过程中主要参考了
https://blog.csdn.net/txfyteen/article/details/82663029

希望最短时间解决大家问题

链接：https://www.jianshu.com/p/a375d830ff85