html - 使用右对齐或左对齐的最佳方式

问题描述

我试图构建一个包含许多子元素的容器元素。我想以这样一种方式实现，一些元素可以左对齐，一些元素可以右对齐。甚至像子元素这样的复杂场景也可以是规则遵循的容器。元素不能具有固定大小。它应该自动调整大小。

如果用一个简单的例子来解释。一个窗口标题栏

标题栏是一个容器
它可以有标题、应用程序图标和控制框
这个控制箱本身就是一个容器，它可以容纳关闭、最大化和最小化按钮。
我希望应用程序图标左对齐。
控制框应右对齐
剩余空间应按标题使用
如果我想容纳选项卡，则选项卡面板将成为另一个以选项卡作为子项的容器。它应该放在应用程序图标和标题之间。

我想我已经够清楚了。实现这一目标的最佳方法是什么。

我试过的。

我尝试使用左右浮动但不灵活的“块”
尝试使用左右边距自动调整 flex。

我仍然无法实现我所需要的。

我确信使用 css 是可能的。但我不是专家。请帮忙

标签： htmlcss

你可以试试这个代码。这是你想要的？

.title-bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: orange;
  font-size: 18px;
  font-family: monospace;
}

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>

<div class="title-bar">
  <div><i class="fab fa-amazon"></i></div>
  <div>Amazing Website</div>
  <div class="control-box">
    <div><i class="fas fa-window-minimize"></i></div>
    <div><i class="far fa-window-maximize"></i></div>
    <div><i class="fas fa-window-close"></i></div>
  </div>
</div>

html - 使用右对齐或左对齐的最佳方式

问题描述

解决方案

推荐阅读