js mapの処理を横に並べたい

Question

配列をmapで回して値を表示しています。
現在は縦に一つずつ表示されているのですがそれを二つ横に並べて縦に表示したいです。
例えばuser1 ,user２が横に表示されていてその下の列にuser3,user４が表示されるよにしたいです。
わかる人いましたらご教授お願いします

追記
またuser1,user2の間をスペースを開けて表示したいです

コード
https://codesandbox.io/s/admiring-chatterjee-yewm6

Answer 1

スタイルシートで.boxにdisplay:flexをして、.box divに40%くらいで調整してみては？

sample

<style>
.box{
display:flex;
flex-wrap: wrap;
  justify-content:space-between;
}
.box div{
width:40%;
}
.box div:nth-child(2n){
  text-align:right;
}
</style>
<div class="box">
<div>user1</div>
<div>user2</div>
<div>user3</div>
<div>user4</div>
<div>user5</div>
<div>user6</div>
<div>user7</div>
<div>user8</div>
<div>user9</div>
</div>

Comments

[kakedashidesu]

間を開けるのはどうしたらいいでしょうか？

[yambejp]

「間を開ける」の意味がわかりませんが、sample上げておいたので参考にしてください