求助：使用Flexbox实现div内UL的响应式右对齐

你的问题根源在于混合使用float与Flex布局，且没有利用Flex的原生对齐属性来控制列表项位置。当前固定的margin-left值在容器缩小时会导致文本溢出边界，我们可以通过调整Flex布局逻辑来解决这个问题。

核心修改要点 #

• 移除.text类里的float: left和margin-left: 47%，这些属性会干扰Flex的对齐逻辑
• 给.navwrapper添加align-items: flex-end（因Flex方向为垂直column，align-items控制水平对齐，flex-end即靠右对齐）
• 将.text的宽度改为自适应，避免固定宽度在窄容器内挤压溢出
• 给.navbar设置min-width，保证导航栏有最小可读宽度，防止过度缩小

修改后的CSS代码 #

@import url(http://fonts.googleapis.com/css?family=Josefin+Slab:600);

.navbar {
  float: left;
  width: 20%;
  min-width: 180px; /* 新增：防止容器过窄导致文本挤压 */
  height: 2000px;
  font: 600 1.25em/1.38 'Josefin Slab';
  background-color: rgb(246, 84, 84);
}

.navbar .text {
  min-height: 39px;
  font-size: 1em;
  color: rgb(255, 255, 255);
  width: auto; /* 改为自适应宽度 */
  margin: 0 10px 10px 0; /* 右侧留间距，避免贴边 */
}

.navbar .text-1{
  margin-top: 50%;
}

.navbar .navwrapper{
  display:flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  align-items: flex-end; /* 新增：让列表项靠右对齐 */
  padding-right: 10px; /* 可选：容器右侧加内边距，优化视觉 */
}

.navbar .text:hover{
  text-shadow: 2px 5px 5px rgba(0, 0, 0, .5);
}

修改逻辑说明 #

• Flex的align-items: flex-end会让垂直排列的导航链接自动贴合容器右侧，当容器宽度缩小时，元素会同步跟随右侧边界移动，不会溢出视野
• 移除float与固定偏移值后，元素位置由Flex布局统一控制，更适配响应式场景
• min-width避免导航栏被压缩到无法阅读的宽度，提升移动端体验

这样调整后，就能实现你想要的理想效果：容器尺寸变化时，导航元素始终靠右且保持在视野范围内。

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