如何使用 display flex 对齐左侧的前两个元素和右侧的最后一个元素

Question

我有一个显示图标 - 文本 - 图标的菜单项。我想将文本向左对齐，使其靠近第一个计算器图标。虽然正确的图标应该保留在最后。我正在尝试，但我做不到。即使编辑 html 我也无法做到这一点，有人可以告诉我正确的方法吗？

.icon_item {
    display: flex;
    justify-content: space-between;
}

.icon_item:after {
  font-family: fontAwesome;
  content: '\f107';
  float: right;
}

.icon_item.visible:after {
  font-family: fontAwesome;
  content: '\f068';
}

.icon_item:before {
 font-family: fontAwesome;
 content: '\f1ec';
 margin-right: 10px;
 width: 22px;
 height: 22px;
 display: flex;
 align-items: center;
 justify-content: center;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

<div class="btnDrop">
 <span class="icon_item">Calculator</span>
</div>

Answer 1

删除 space-between 并将 margin-left:auto 添加到相关图标。

.icon_item {
    display: flex;
  
}

.icon_item:after {
  font-family: fontAwesome;
  content: '\f107';
  margin-left:auto;
}

.icon_item.visible:after {
  font-family: fontAwesome;
  content: '\f068';
}

.icon_item:before {
 font-family: fontAwesome;
 content: '\f1ec';
 margin-right: 10px;
 width: 22px;
 height: 22px;
 display: flex;
 align-items: center;
 justify-content: center;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

<div class="btnDrop">
 <span class="icon_item">Calculator</span>
</div>

如何使用 display flex 对齐左侧的前两个元素和右侧的最后一个元素

How to align the first two elements on the left and the last on the right with display flex

html

css

alignment

font-awesome