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

Question

I have a menu item that shows icon - text - icon. I would like to align the text to the left so that it is close to the first calculator icon. While the right icon should remain at the end. I'm trying but I can't. Even editing html I can't achieve this, can someone show me the right way ?

.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>

score 1 · Accepted Answer · answered May 25 '22 at 16:11

Remove space-between and add margin-left:auto to the relevant icon.

.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>

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

1 Answers1