Простая помощь CSS

Question

Мне нужно, чтобы мои элементы были в одной строке, в центре по высоте и имели право горизонтального выравнивания в ограниченном блоке. Я попытался использовать flexbox для этого, и все отлично работает только для одной позиции, иначе переполненный элемент займет все свободное пространство, и он не выглядит правильно выровненным.

.flex { 
 
    width:80px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: flex-end; 
 
} 
 
span { 
 
    text-align:right; 
 
}

<div class="flex"> 
 
    <i>0</i> 
 
    <span> 
 
    good 
 
    </span> 
 
</div><br> 
 
<div class="flex"> 
 
    <i>0 </i> 
 
    <span> 
 
    Not that good 
 
    </span> 
 
</div>

Answer 1

Вы должны поместить гибкий атрибуты на контейнер таким образом, что элементы (ваши дивы) получить выровнены. Здесь вы можете увидеть рабочий раствор:

Flexbox

Вашего контейнер будет иметь следующие атрибуты CSS и является простыми делами.

.container { 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-end; 
    justify-content: flex-end; 
} 

мне очень нравится Руководство для Flexbox, которые вы можете найти HERE. ИТ помог мне разобраться в специфических модификаторах flexbox.