Как вывести строки ровно?

Question

Вывожу JSON файл на страницу, выравниваю flexbox, но некоторые строки выходят кривые. Как можно вывести их ровно??

 return (
            <div className='resultPage'>
                <ol className= 'list'>
                    {persons.map((person, index) => (
                        <li  key = {index}>
                            <div className= 'container'>
                            <div className= 'name'>{person.name}</div>
                            <div className= 'score1'>{person.scores[0]}</div>
                            <div className= 'score2'>{person.scores[1]}</div>
                            <div className= 'score3'>{person.scores[2]}</div>
                             <div className= 'finalScore3'>{person.final_score}</div>
                            </div>
                        </li>
                    ))}
                </ol>
            </div>
        )
    }

.resultPage {
    display: flex;
    justify-content: center;
    margin-top: 100px;


}

.list {
    width:80%;
}

.name {

}

li {
    margin-top: 15px;
}
.container {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

Answer 1

нужно фиксировать ширину имен и цифровых значений. например через flex-basis

.resultPage {
display: flex;
justify-content: center;
margin-top: 100px;
}

.list {
width: 80%;
}

.name {
}

li {
margin-top: 15px;
}
.container {
display: flex;
width: 100%;
justify-content: space-between;
}

.name {
flex-basis: 40%;
}
.score1 {
flex-basis: 15%;
}
.score2 {
flex-basis: 15%;
}
.score3 {
flex-basis: 15%;
}
.finalScore3 {
flex-basis: 15%;
}

            <div class='resultPage'>
                <ol class= 'list'>
                  
                        <li>
                            <div class= 'container'>
                            <div class= 'name'>name 1</div>
                            <div class= 'score1'>10</div>
                            <div class= 'score2'>20</div>
                            <div class= 'score3'>30</div>
                             <div class= 'finalScore3'>40</div>
                            </div>
                        </li>
                         <li>
                            <div class= 'container'>
                            <div class= 'name'>name last mane</div>
                            <div class= 'score1'>180</div>
                            <div class= 'score2'>2000</div>
                            <div class= 'score3'>3</div>
                             <div class= 'finalScore3'>40</div>
                            </div>
                        </li>
                   
                </ol>
            </div>

БЛОГ НА HUSL

Как вывести строки ровно?

Ответы (1 шт):