如何使用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>