如何将flex容器右对齐？实现外层容器占60%宽度并左侧补位

要实现你描述的布局——让#feed占可用宽度60%并右对齐，#friends填充左侧剩余空间，需要给这两个容器添加一个共同的父级flex容器来控制整体排列。

完整CSS代码 #

/* 新增父容器，控制整体布局 */
.container {
  display: flex;
  width: 100%;
}

#friends {
  display: flex;
  flex: 1; /* 自动填充左侧剩余空间 */
  /* 可选样式：方便区分容器，可按需修改 */
  border: 2px solid blue;
  border-radius: 25px;
  padding: 1rem;
}

#feed {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 60%;
  margin-left: 1rem; /* 可选：给两个容器之间添加间距 */
}

.tweet {
  display: flex;
  border: 2px solid red;
  border-radius: 25px;
  flex: 1;
  flex-wrap: wrap;
  padding: 1rem; /* 可选：避免内容紧贴边框 */
  margin-bottom: 1rem; /* 可选：给子容器添加垂直间距 */
}

关键布局逻辑 #

• 父容器.container设置为display: flex且宽度100%，确保它占据全部可用宽度，作为两个子容器的布局载体。
• #friends通过flex: 1属性，会自动填充#feed（60%宽度）之外的剩余空间，也就是可用宽度的40%。
• #feed保持width: 60%的设置，在flex布局中会自然靠右，左侧空间由#friends完全填充。
• 代码中的可选样式（边框、内边距、间距）是为了让布局效果更直观，实际开发中可以根据设计需求调整或移除。

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