HTML/CSS Лучший способ горизонтально выровнять элементы внутри DIV

Question

Im работает на followinig:

Содержание в правой части (желтый BG) должен быть «сложены» выровнены по горизонтали внутри правый раздел.

Что является лучшим/простым способом решения этой проблемы?

1. Могу ли я использовать divs с процентом высоты?
2. Должен ли я использовать поля и отрицательные поля?
3. Должен ли я создавать отдельные div для каждого фрагмента контента в правой части?

Любая помощь, примеры или ресурсы, много оценили

Answer 1

flexbox Использование

.outer { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.inner { 
 
    padding: 20px 0; 
 
    background: red; 
 
    margin: 5px; 
 
} 
 

 
.inner.nr1, 
 
.inner.nr2 { 
 
    width: 80%; 
 
} 
 
.inner.nr3, 
 
.inner.nr4, 
 
.inner.nr5 { 
 
    width: 25%; 
 
}

<div class="outer"> 
 
    <div class="inner nr1"> 
 
    </div> 
 
    <div class="inner nr2"> 
 
    </div> 
 
    <div class="inner nr3"> 
 
    </div> 
 
    <div class="inner nr4"> 
 
    </div> 
 
    <div class="inner nr5"> 
 
    </div> 
 
</div>