如何让flex容器宽度自适应内容？实现第三行元素左右对齐

问题核心是.line-three作为flex容器时，.types被设置为width:100%，导致它占据整行宽度，挤压了右侧状态占位符的空间；同时.types的子元素#type-one、#type-two也设置了width:100%，会让单个图标容器过度扩展，导致图标无法相邻排列。

只需调整以下CSS规则即可解决：

.line-three {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between; /* 让子元素分别靠左右两端 */
}

.types {
  width: auto; /* 取消100%宽度，仅占自身内容所需空间 */
  height: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 3px;
}

#type-one,
#type-two {
  display: flex;
  width: auto; /* 取消100%宽度，适配图标自身尺寸 */
}

修改说明： #

• 给.line-three添加justify-content: space-between，让.types和#status自动分别对齐行的左右两端，中间空白空间自动填充。
• 将.types的width从100%改为auto，使其仅包裹内部两个类型图标，避免占据整行。
• 将#type-one、#type-two的width从100%改为auto，让每个图标容器仅适配自身图标的尺寸，保证两个图标可以相邻排列。

修改后的完整CSS代码：

.pokemon-card {
  width: 300px;
  height: 100px;
  background-color: antiquewhite;
  border-radius: 50px 0 0 50px;
  display: flex;
  overflow: hidden;
  align-items: center;
}

.sprite {
  min-width: 100px;
  width: 100px;
  display: flex;
  justify-content: center;
}

.sprite>img {
  max-width: 85%;
  max-height: 85%;
}

.stats {
  width: 100%;
  display: grid;
  grid-template-rows: 31px 18px 20px 22px;
  gap: 3px;
}

.line-one,
.line-two,
.line-three,
.line-four {
  display: flex;
  align-items: center;
  width: 100%;
}

.line-three {
  justify-content: space-between;
}

#name {
  grid-area: name;
  font-size: 30px;
}

#form {
  grid-area: form;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: end;
}

#form>img {
  min-height: 0;
  min-width: 0;
}

.types {
  width: auto;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 3px;
}

#type-one,
#type-two {
  display: flex;
  width: auto;
}

#type-one>img,
#type-two>img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

#status>img {
  max-height: 100%;
  max-width: 100%;
}

.hp-container {
  width: 100%;
  height: 20px;
  background-color: black;
  border-radius: 10px 0 0 0;
}

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