May 27, 2022 HTML

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

Issue

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>

Solution

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>

Answered By – Paulie_D

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply Cancel reply