为何justify-content:space-between/space-evenly无法实现均匀布局？

问题出在.container .title的width: 100%设置上——每个.title元素都被强制撑满父容器宽度，三个元素完全重叠，导致justify-content的空间分配规则无法生效。

修复步骤 #

1. 调整.title的宽度设置
   把.container .title中的width: 100%替换为flex: 1，让三个模块自动平分.container的可用空间，同时添加flex-direction: column让卡片内部元素垂直排列，符合卡片布局预期：

   .container .title{
     display: flex;
     flex-direction: column;
     flex: 1;
     padding: 1em; /* 可选：添加内边距优化视觉 */
     background: #fff; /* 可选：添加背景区分卡片 */
     margin: 0 0.5em; /* 可选：添加左右间距避免紧贴 */
   }
   

2. 优化.container的对齐方式
   建议将align-items改为flex-start，避免不同高度的卡片被强制拉伸：

   .container{
     background: #999;
     display: flex;
     justify-content: space-between; /* 或space-evenly/space-around */
     align-items: flex-start;
     padding: 1em; /* 可选：添加内边距优化容器视觉 */
   }
   

修改后的完整CSS示例 #

.skills-wrapper{
  width: 100%;
  height: 100vh;
  background: #CCD6F6;
}

.content-wrapper{
  width: 100%;
  max-width: 75.5em;
  padding: 1.875em;
  margin: 0 auto;
}

.content-wrapper h1{
  font-size: 2rem;
  color: #E1065E;
  padding: 0.524em 0;
}

.container{
  background: #999;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1em;
}

.container .title{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1em;
  background: #fff;
  margin: 0 0.5em;
}

修改后，三个模块会均匀分布在容器内，实现预期的卡片式布局效果。

内容的提问来源于stack exchange，提问作者MeL17