Использование 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
Одним из подходов может быть использование сетки для основного макета и внутри каждого элемента сетки использование компонентов 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/
Проблема в «margin: auto» класса, применяемого к каждой иконке. Например, установите для этого поля значение 0 или 10 пикселей. Значение «авто» заставляет поле заполнять все доступное пространство. Хорошая игра, кстати, впечатляет.
Большое спасибо, не заметил маржу: авто, отлично работает!
это довольно близко. Если внутри div есть только один элемент, он работает хорошо, но внутри div #lifes есть 3 объекта, поэтому вывод распределяется, как с использованием justify-content: space-between. Жизни должны держаться рядом друг с другом, будучи сосредоточенными в #жизнях. Есть идеи, как это исправить? Я обновил это на удаленном сервере.