Каков наилучший способ выравнивания содержимого слева и справа в заголовке при использовании 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; 
} 

Это работает и плавает в "Свойства системы" в ле ft и «что будет двумя кнопками img» справа.

Если я поместил стили span в классы, он перестанет работать. Зачем?

Если я поставлю «дисплей: flex;» в родительский div, он также перестает работать? Зачем? Я действительно хочу использовать display flex. На самом деле я довольно долго возился с этим.

Моим любимым решением было сделать отображение: flex и justify-content: flex-end на родительском (при использовании двух дочерних divs вместо интервалов), но я не мог понять, как плавать " Свойства системы "влево.

Я стараюсь сделать его отзывчивым, поэтому я был бы признателен, если бы кто-нибудь мог помочь мне понять, что является лучшей практикой и неточно помогает мне понять, почему свойство span style работает в 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>