使用右对齐或左对齐的最佳方式答案

【问题标题】：The best way to use right or left align使用右对齐或左对齐的最佳方式
【发布时间】：2021-07-09 02:39:56
【问题描述】：

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

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

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

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

我已经尝试过了。

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

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

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

【问题讨论】：

请提供您尝试过的 HTML 和 CSS。如果你知道你需要的结构，可能是你很亲近，让人们用整块布料制作可能满足也可能不满足你需求的东西，就像现有的答案一样，似乎是在浪费时间。

标签： html css

【解决方案1】：

你能试试这个代码吗？这是你要找的吗？

.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>

【讨论】：

【解决方案2】：

这里是代码，希望对解决你的问题有所帮助。 Codepen 链接：https://codepen.io/mesapkota/pen/GRmqvpJ

HTML：

<div class="wrapper">
  <div class="title-bar">
    <h1>title Bar</h1>
  </div>
  <div class="container">
    <div class="item">Icon</div>
    <div class="item">Title</div>
    <div class="item">
      <div class="box">
         <div class="btn">Close</div>
        <div class="btn">Maximize</div>
        <div class="btn">Minimize</div>
      </div>
    </div>
  </div>
</div>

CSS：

.wrapper{
  width:600px;
  max-width:600px;
}
.container, .title-bar{
  display:flex;
  width:100%;
}
.item{
   flex: 1;
}
 .box{
 display:flex;
 justify-content:flex-end;
}
.title-bar{
  background:#eee;
  margin-bottom:15px;
}
.title-bar h1{
  font-size:18px;
  text-transform:uppercase;
  padding: 3px;
}
.item,.btn{
  margin-right:10px;
}
.btn {
  background:#666;
  border-radius:5px;
  padding:2px 4px;
  color:#fff;
  font-size:14px;
}
.btn:first-child{
  background:#EB1F12;
}

【讨论】：