Flex布局下实现菜单项均匀分布且父容器右对齐的方法

很简单，咱们只需要调整黄色容器（.middle）的flex对齐属性，或者给菜单列表（ul）添加自动外边距，就能把绿色菜单项推到容器右侧。下面给你两种可行的方法：

方法1：给.middle设置justify-content: flex-end #

因为.middle本身是flex容器，默认的justify-content值是flex-start（左对齐），改成flex-end就能让里面的ul直接靠右对齐：

.wrapper { display: flex; height: 5em; }
.left { flex: 1; display: flex; }
.middle { 
  flex: 4; 
  background: #ffc; 
  display: flex!important; 
  justify-content: flex-end; /* 添加这行实现右对齐 */
}
ul { display: flex; max-width: 200px; }
li { list-style: none; flex: 1; background: #cfc; text-align: center; }
.right { flex: 1; }

方法2：给ul添加margin-left: auto #

利用flex布局中auto外边距的特性，让ul左侧的空间自动填充，从而把它挤到容器右侧：

.wrapper { display: flex; height: 5em; }
.left { flex: 1; display: flex; }
.middle { flex: 4; background: #ffc; display: flex!important; }
ul { 
  display: flex; 
  max-width: 200px; 
  margin-left: auto; /* 添加这行实现右对齐 */
}
li { list-style: none; flex: 1; background: #cfc; text-align: center; }
.right { flex: 1; }

这两种方法都能达到你要的效果：当黄色容器有额外空间时，绿色菜单项会靠右对齐，同时菜单项内部依然保持均匀分布的状态。

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