使用 flexbox 时在标题中左右对齐内容的最佳方法是什么？

Question

我正在努力寻找合适的关键字来解决这个问题。

这是我的有效代码：

HTML

 <div class="windowTopBar">
   <span style="display: inline-block;"><b>System Properties</b></span>
   <span style="float: right;">[?][X]</span>
 </div>

CSS

 .windowTopBar {
   background: linear-gradient(90deg, #000080, #1084D0);
   color: white;
   height: 2em;
   min-height: 2em;
   align-items: center;
   margin: 0;
 }

这样可以将“系统属性”浮动到左侧，将“两个 img 按钮”浮动到右侧。

如果我将跨度样式放入类中，它将停止工作。为什么？

如果我输入“display: flex;”进入父div，它也停止工作了吗？为什么？我真的很想使用 display flex。实际上，我已经搞砸了很长时间。

到目前为止，我最喜欢的解决方案是在父级上执行 display: flex 和 justify-content: flex-end （同时使用两个子 div 而不是跨度），但我不知道如何浮动“系统属性”在左侧。

我正在努力使其具有响应性，因此如果有人能帮助我理解最佳实践是什么，并明确帮助我理解为什么 span 样式属性在 html 中有效，但在 css 类中无效，我将不胜感激。

要特别清楚，如果我这样做：

HTML

 <span class="test1">blah1</span>
 <span class="test1">blah2</span>

CSS

 .test1 {
   display: inline-block;
 }
 .test2 {
   float: right;
 }

它不起作用。请帮忙！ :) 如果我要求太多，请原谅我。这是我的第一个问题，但我已经潜伏多年了。

Answer 1

我会使用justify-content: space-between:

.windowTopBar {
  display: flex;
  justify-content: space-between;
}

 <div class="windowTopBar">
   <span><b>System Properties</b></span>
   <span>[?][X]</span>
 </div>