Адаптировать div, содержащий элементы для разных разрешений

Question

У меня есть div, который является баром, который всегда должен находиться в верхней части экрана. Он отображает оценку и сколько у вас жизней (каждый из них - холст). Мне нужен счет, и жизнь всегда будет в том же положении, несмотря на разные разрешения экрана.

HTML:

<div class='upperbar'> 
<h1 id="scoreword">SCORE: number</h1> 
<div class="lives"> 
    <canvas id="life1" width="100" height="100"></canvas> 
    <canvas id="life2" width="100" height="100"></canvas> 
    <canvas id="life3" width="100" height="100"></canvas> 
</div> 
</div> 

CSS:

.upperbar { 
display: flex; 
height: 8.5%; 
width: 100%; 
background: rgba(0, 0, 0, .2); 
} 

#scoreword { 
position: absolute; 
opacity: 1; 
font-size: 1.8em; 
text-align: left; 
position: relative; 
top: 50%; 
left: 2%; 
} 

.lives { 
position: relative; 
right: 0; 
} 

Я совершенно запутался об этом. Как мне это сделать?

Answer 1

та же идея с flex и обосновывает-контент: пространство между ними;

http://jsfiddle.net/bestiole/tjg09mbt/

.upperbar { 
    display: flex; 
    justify-content:space-between; 
    height: 8.5%; 
    width: 100%; 
    background: rgba(0, 0, 0, .2); 
} 

#scoreword { 
    font-size: 1.8em; 
    margin:0; 
    background:#f00; 
} 

.lives { 
    background:#ff0; 
} 

код отсутствует закрывающий DIV

Answer 2

Вы используете display: flex в своей оболочке div, но вы не применяете правила гибкости в своих дочерних div.

Проверьте мои изменения в CSS здесь: http://jsfiddle.net/7ns1epa5/

.upperbar { 
display: flex; 
height: 8.5%; 
width: 100%; 
background: rgba(0, 0, 0, .2); 
} 

#scoreword { 
opacity: 1; 
font-size: 1.8em; 
text-align: left; 
top: 50%; 
    background-color:orange; 
    flex:1; 
} 

.lives { 
    background-color:red; 
    flex:1; 
} 

прогибается: 1 как на ребенке DIVS говорит "использовать 50% родительскую гибкую оболочку". Математика, лежащая за ней, «суммирует общий сгиб каждого дочернего div как знаменателя, а затем берет номер его гибкости в качестве числителя» - поэтому два дочерних div с flex: 1 будут 1 + 1 = 2, каждый div будет 1/2 или 50% «Если вы изменили один из дочерних divs на flex: 2, это будет 1 + 2 = 3, а div будут равны 1/3 и 2/3.