Используя flex, один элемент выровнен по центру, а другие разнесены между центром и правым

Question

У меня есть небольшая проблема, чтобы произвести ниже с гибкой коробкой. Я хотел бы выровнять по центру «заголовок» с некоторыми кнопками справа (2,3,4).

Код ниже приближает меня, но он не совсем выровнен и теряет его при изменении размера окна.

Есть предложения?

.header {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: center;
}

.title {
  width: 250px;
  margin-left: auto;
  margin-right: 15%;
}

.btn-group {
  margin-right: 15%;
}

<div class="header">
  <h1 class="title"></h1>
  <div class="btn-group">
    <button id="btn_1" class="selected">2</button>
    <button id="btn_2">3</button>
    <button id="btn_3">4</button>
  </div>
</div>

Answer 1

Вот мои предложения при использовании макета flexbox. Вам не нужно устанавливать ширину элемента, потому что ширина будет изменяться динамически. Когда вы устанавливаете display как flex в контейнере, ось x по умолчанию изменится на строку, а затем будет использовать свойство flex для класса title, чтобы увеличить ширину до удвоенной ширины btn-group. В результате второй div будет перемещаться вправо до sh, и вы можете добавить ширину поля right-right как желаемое значение. Кроме того, я бы создал еще один div после заголовка и дал бы ему имя класса в качестве 'title' вместо того, чтобы указывать его на h1. Таким образом, у вас будет двое детей, которые позволят вам контролировать это. Смотрите ниже, как я это исправил:

h1 {
  text-align: center;
}

.header {
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  flex: 1;
}

<div class="header">
    <div class="title">
      <h1>This is a title</h1>
    </div>

    <div class="btn-group">
        <button id="btn_1" class="selected">2</button>
        <button id="btn_2">3</button>
        <button id="btn_3">4</button>
    </div>
</div>

Answer 2

Вот простой и понятный процесс, позволяющий вам перейти к макету:

Во-первых, обратите внимание, что CSS псевдоэлементы (т. Е. ::before и ::after), когда применяются к гибким контейнерам, обрабатываются как элементы Flex.

1. Создание псевдоэлемента, который будет служить первым элементом Flex в контейнере.

2. Использование псевдоэлемента все доступное пространство (т. е. установите его на flex: 1)

3. Сделайте то же самое с группой кнопок (.btn-group) на противоположном конце (т. е. установите на flex: 1 )

Теперь, когда внешние элементы нажимают с обеих сторон, заголовок прикрепляется к середине контейнера.

Сделать контейнер группы кнопок гибким контейнером.

Установите для этого контейнера значение justify-content: center.

Теперь отдельные кнопки расположены по центру по горизонтали справа от уже центрированного заголовка.

.header {
  display: flex;
  height: 50px;
  align-items: center;
}

.header::before {
  content: "";
  flex: 1;
}

.btn-group {
  flex: 1;
  display: flex;
  justify-content: center;
}

<div class="header">
  <h1 class="title">1</h1>
  <div class="btn-group">
    <button id="btn_1" class="selected">2</button>
    <button id="btn_2">3</button>
    <button id="btn_3">4</button>
  </div>
</div>

Чтобы лучше понять концепции и методологию работы, см. Этот пост:

• flexbox по центру и по правому краю элементы