Magento 2.2.3中Flex容器右对齐及移动端适配问题

我明白你遇到的困扰了——想让#kidsaw-social-links这个flex容器贴到父区块右侧，用了justify-content: flex-end却没效果，手动设固定宽度虽然能对齐，但移动端适配又出问题。

问题根源 #

你当前的flex容器#kidsaw-social-links默认是收缩到内容宽度的，也就是它只占自身子元素总宽度的空间，所以justify-content: flex-end只是让子元素在这个小容器内部右对齐，看起来根本没贴到父容器右侧。而手动设固定宽度的话，当屏幕宽度小于固定值时，容器会超出父容器范围，导致横向滚动，自然没法适配移动端。

解决方案 #

给#kidsaw-social-links添加width: 100%，让它占满父容器的可用宽度，同时加上box-sizing: border-box（可选，但能避免后续加内边距时宽度溢出）。这样justify-content: flex-end就能让子元素真正贴到父容器右侧，而且因为父容器已经有自适应宽度设置，移动端缩小窗口时也能自动适配。

修改后的完整CSS代码：

.page-bottom, .footer .content {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  max-width: 1280px;
  padding-left: 20px;
  padding-right: 20px;
  width: auto;
}

#kidsaw-social-links {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  background-color: red;
  width: 100%; /* 新增：让容器占满父元素宽度 */
  box-sizing: border-box; /* 可选：确保宽度计算包含内边距（如果后续添加的话） */
}

#kidsaw-social-links > div {
  width: auto;
  height: auto;
  border: 1px dashed red;
}

#kidsaw-footer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

#kidsaw-footer > div {
  width: auto;
  height: auto;
  padding: 10px;
}

#kidsaw-footer > ul {
  list-style-type: none;
  padding-left: 20px;
}

额外移动端适配建议 #

如果在极小屏幕下，社交图标挤在一起影响观感，可以给#kidsaw-social-links添加媒体查询，让它在小屏幕下换行：

@media (max-width: 480px) {
  #kidsaw-social-links {
    flex-wrap: wrap;
    justify-content: center; /* 小屏幕下可以改成居中，也可以保持右对齐 */
  }
}

这样既解决了右对齐的核心问题，又能完美适配各种屏幕尺寸。

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