Html 基于Flex的css对齐

我不熟悉基于flex的css，并尝试为下面这样的简单屏幕实现基于flex的css。如何将css更改为基于flex的css任何指针都会有所帮助

.酒吧间{ 填充：5px 0 20px 0； 背景颜色：浅灰色； } .iconParentContainer{ 字体大小：12px； 字体大小：粗体； 颜色：灰色； 填充：15px； } .iconContainer{ 右侧填充：15px； } .图标{ 字号：18px； 右边距：10px； } .右上角图标{ 背景色：3079c6； 颜色：fff； 浮动：对； 高度：35px； 宽度：35px； 字体大小：30px； 位置：绝对位置； 右：20px； 顶部：-10px； 边界半径：30px； 文本对齐：居中； } .右面板{ 浮动：对； 右边距：150px； 字体大小：16px； 颜色：钢蓝色； 字体大小：粗体 } xyzpqr lmn abc +

---

Flex box基于父子关系。 给你的父母一个display:flex属性，在你的例子中它是你的.barContainer。 如果要从头到尾分发子项，还可以为parent.barContainer提供justify content:space between属性。 若要垂直居中所有项目，请同时为父项指定“对齐项目：居中”属性 总结一下：

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

当然，flex box可以做得更多，但您应该熟悉每个特性本身。 CSS技巧Flexbox的完整指南是一个良好的开端：

我还创建了一个交互式演示来使用它：

您还可以使用一些有用的真实示例来查看我的收藏：

---

您是否尝试更改？您目前使用flex的解决方案在哪里？我的跟踪记录在