求助：使用justify-content无法将Flex元素右移甚至居中的问题

Your issue comes down to two key gaps in your CSS:

1. .header-container doesn’t span the full width of its parent, so there’s no extra space to align elements within.
2. .link-container uses flex:none, which restricts it to the width of its content—leaving no room for justify-content to adjust the links’ position.

Here are two reliable solutions:

Solution 1: Push the Link Container to the Right with Auto Margin #

This method leverages flexbox’s auto margin behavior to shift the entire link container to the right edge:

.header-container {
  display: flex;
  margin: 0 auto;
  border: 30px solid black;
  width: 100%; /* Make container span full width */
}

.link-container {
  display: flex;
  flex: none;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-left: auto; /* Push container to the right */
}

Solution 2: Expand Link Container and Align Links to the End #

This approach makes the link container take all remaining space after the log container, then aligns links to the right within that expanded space:

.header-container {
  display: flex;
  margin: 0 auto;
  border: 30px solid black;
  width: 100%; /* Make container span full width */
}

.link-container {
  display: flex;
  flex: 1; /* Occupy all remaining space */
  align-items: center;
  gap: 20px;
  justify-content: flex-end; /* Align links to right */
  flex-wrap: wrap;
}

Key Notes: #

• width:100% on .header-container is critical—it ensures the container uses all available width, which is necessary for alignment.
• Solution 1 keeps the link container tightly wrapped around its links but positions it at the right edge.
• Solution 2 is better if you need the link container to fill the remaining space (e.g., for background styling on the link area).

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