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基于父子关系。 在您的示例中，为您的父级提供display: flex属性.barContainer。 如果您要从头到尾分发子项，还可以向父级（.barContainer）提供justify-content: space-between的属性。 要垂直居中所有项目，也会为您的父级提供align-items: center的属性 包装起来：

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

当然，flex-box可以做得更多，但你应该熟悉它自己的每个属性。 CSS技巧＆＃34; Flexbox完整指南＆＃34;是一个好的开始： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我还创建了一个互动演示来玩它： https://codepen.io/marcobiedermann/full/zNydxa/

您还可以使用一些有用的实际示例来结帐我的收藏： https://codepen.io/collection/AyaKpp/