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

Question

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

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

• 标题栏是一个容器

• 它可以有标题、应用程序图标和控制框

• 这个控制框本身就是一个容器，用于容纳关闭、最大化和最小化按钮。

• 我希望应用程序图标左对齐。

• 控制箱应正确对齐

• 剩余空间应由标题使用

• 如果我想容纳选项卡，选项卡面板将成为另一个容器，其中选项卡作为子容器。它应该放在应用程序图标和标题之间。

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

我尝试过的。

• 我试过用左右浮动的"block"，但不灵活
• 尝试左右自动调整边距

我还是达不到我需要的。

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

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

Answer 2

以下是代码，希望能帮助解决您的问题。链接到代码笔：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;
}