Блог

Главная - Вопросы по программированию - Использование flexbox для центрирования динамических объектов

Использование flexbox для центрирования динамических объектов

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

При запуске игры центрирование flexbox отлично работает (на статических объектах). По ходу игры оба (заголовок и оставшиеся разделы) изменяют свои значения / размеры, что приводит к постоянной корректировке расположения центра с помощью flexbox (все разделы в заголовке перемещаются).

Я хочу, чтобы каждый div внутри заголовка оставался «фиксированным» во время игры.

Возможно ли это просто с помощью flexbox или мне следует использовать другой подход? Должен ли я располагать каждый элемент по отдельности?

Вы можете наблюдать за поведением заголовка на удаленном сервере: https://stacho163.000webhostapp.com/firstLevel.html

 body {
  margin: 0;
  width: 100%;
  height: 100%;
}

header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: white;
}

#game-window {
  position: absolute;
  width: 90vw;
  height: 90vw * 16/9;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%);
  background-color: gray;
}  
 <body>
  <header>
    <div id="lifes">
      Life1 Life2 Life3
    </div>
    <div id="title">
      Title (changes when you win)
    </div>
    <div id="remain">
      Remaining: (from 100 to 0)
    </div>
  </header>
  <canvas id="game-window"></canvas>
</body>

https://jsfiddle.net/nfzj183t/14/

Я спрашиваю, поскольку у меня нет большого опыта работы с веб-материалами, и я хочу использовать правильный подход для решения этой простой проблемы.
Заранее благодарю вас за ваши советы 🙂

Ответ №1:

Одним из подходов может быть использование grid для основного макета, а внутри каждого элемента grid использовать компоненты flexbox.

заголовок был бы чем-то вроде:

 header {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: 10vh;
}

И вам нужно будет сделать каждый столбец контейнером «display: flex;». Это было бы примером с «жизнями»:

 #lifes{
  display: flex;
  align-items: center;
  justify-content: center;
}

При необходимости я могу показать вам более сложные примеры.

Ссылка: https://gridbyexample.com/examples /

Комментарии:

1. это довольно близко. Если внутри div есть только один элемент, он работает хорошо, но внутри #lifes div есть 3 объекта, поэтому выходные данные распределяются, как при использовании justify-content: пробел между. Жизни должны располагаться рядом друг с другом, будучи центрированными в #lifes. Есть идеи, как это исправить? Я обновил это на удаленном сервере.

2. Проблема заключается в «margin: auto» класса fas, применяемого к каждому значку. Установите это поле, например, равным 0 или 10 пикселей. Значение «auto» заставляет поле заполнять все доступное пространство. Кстати, хорошая игра, она впечатляет.

3. Большое вам спасибо, не заметил поля: auto, отлично работает!