Flex based css alignments

Question

I am new to flex based css and trying to implement flex based css for a simple screen like the below. How can I change css to flex based css any pointer would help.

.barContainer {
  padding: 5px 0 20px 0;
  background-color: lightgray;
}

.iconParentContainer {
  font-size: 12px;
  font-weight: bold;
  color: gray;
  padding: 15px;
}

.iconContainer {
  padding-right: 15px;
}

.icon {
  font-size: 18px;
  margin-right: 10px;
}

.topRightIcon {
  background-color: #3079c6;
  color: #fff;
  float: right;
  height: 35px;
  width: 35px;
  font-size: 30px;
  position: absolute;
  right: 20px;
  top: -10px;
  border-radius: 30px;
  text-align: center;
}

.rightPanel {
  float: right;
  margin-right: 150px;
  font-size: 16px;
  color: steelblue;
  font-weight: bold
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="barContainer">
  <span class="iconParentContainer"><span class="iconContainer"><span class="icon"> <i class="fa fa-clone" aria-hidden="true"></i></span> <span>xyz</span></span><span class="iconContainer"><span class="icon"><i class="fa fa-archive" aria-hidden="true"></i></span><span>pqr</span></span>
  <span style="iconContainer"><span  class="icon"><i class="fa fa-trash" aria-hidden="true"></i></span>
  <span>lmn</span></span>
  </span>

  <span class="rightPanel">
            <span><i class="fa fa-bars" aria-hidden="true"></i></span>             <span style="cursor: pointer;">abc</span>         </span>
  <span class="topRightIcon"> + </span>
</div>

Answer 1

Flex-box is based on parent child relationship. Give your parent a property of display: flex which is your .barContainer in your example. If you want to distribute your child items from start to end, you also give your parent (.barContainer) a property of justify-content: space-between. To center all items vertically also give your parent the property of align-items: center To wrap it up:

.barContainer {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

Of course, flex-box can do even more but you should get familiar with each property on it's own. CSS Tricks "A Complete Guide to Flexbox" is a good start: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I also created an interactive demo to play around with it: https://codepen.io/marcobiedermann/full/zNydxa/

You can also checkout my collection with some useful real-world examples: https://codepen.io/collection/AyaKpp/