How can I fix the alignment of my inline-flex icons?-CodePudding

I'm hoping there's just something major I'm missing here with inline-flex.

I'm using display: inline-flex and the order of the 2 items inside of the element change how the element aligns with its siblings.

In this scenario I have 3 anchor tags each with some text and an "icon" element. On the 2nd anchor tag I've put the "icon" element as the first child which causes the element to not align with its sibling anchor tags.

.item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
}

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: red;
}

<a href="#" >
  item
  <span ></span>
</a>
<a href="#" >
  <span ></span>
  item
</a>
<a href="#" >
  item
  <span ></span>
</a>

Here's a CodePen that shows the issue: https://codepen.io/Fernker/pen/BaVjvXB

CodePudding user response：

Here are two options:

Set vertical-align on the .item {} selector; you can use the value bottom, middle, or top... whichever one fits your needs.
Transpose the position of the "item" text and the <span> in your second/middle <a> link.