display: inline-flex导致span元素float:right属性失效问题咨询

问题根因 #

• float属性对flex（包括inline-flex）容器的直接子元素不生效是CSS规范明确规定的特性，flex布局的格式化上下文会直接忽略子元素的float、clear相关设置，所以你给.open-text加的float:right完全没有作用。
• 另外你当前的.styled-link设置了display: inline-flex，默认宽度仅由内部内容撑开，就算float生效也没有剩余空间供元素右对齐到行尾。

修复方案 #

方案1：保留inline-flex布局，用flex原生能力实现对齐 #

先调整DOM节点顺序，把固定文本放在前面，open-text放在后面，再修改对应样式即可：

<li class="styled-link">
  List item one
  <span class="open-text">Open</span>
</li>

.styled-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between; /* 实现两端对齐 */
  width: 100%; /* 给容器设置足够宽度，才有对齐的剩余空间 */
  font-size: 12px;
  color: #63666a;
}

.open-text {
  /* 删除无效的float: right和display: block属性 */
  font-size: 14px;
  margin-right: 35px;
}

方案2：无需flex特性的情况下直接移除inline-flex配置 #

如果没有必须使用flex布局的场景，直接删掉.styled-link的display: inline-flex和align-items: center属性，原来写的float:right就会正常生效。

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