css - 如何在每行中渲染最多 4 个元素

Question

所以我有一个 api 可以从数据库中获取一系列游戏。我想在前端渲染它们。

我想确保每行最多有 4 个游戏。所以如果有 10 场比赛，那就是这样的。

game  game  game  game
game  game  game  game
game  game

我试过以下方法:

 this.state.sports.map((item, idx) => {
  if((idx + 1) % 4 === 0){
    game_list.push(
      <div className="row">
        <div key={item.name} className='each-game' >
            {item.name} 
            <br/>
            <img src={item.image} height = "100" width="100" alt = 'Not available'/>
        </div>
      </div>
    )
  }else{
    game_list.push(
      <div key={item.name} className='each-game'>
        {item.name} 
        <br/>
        <img src={item.image} height = "100" width="100" alt = 'Not available'/>
      </div>
    )
  }
})

{ game_list }

CSS

.row {
    display: flex;
    flex-direction: row;
}

我得到了

game game game game game game game game game game

有人可以帮我修复它或告诉我更好的方法吗？多谢。

Answer 1

这不是一个 react 问题，你可以只添加没有一行的元素并设置 flex-basis: 25%;

要将最后一行与 lset 对齐，您可以添加 3(如果您的 n 不同，则添加 n-1)高度为 0 的“虚拟”元素:

.cont {
  display: flex;
  flex-wrap: wrap;
}

.each-game {
  flex-grow: 1;
  flex-basis: 25%;
}

.dummy {
  flex-grow: 1;
  flex-basis: 25%;
  height: 0;
}

<div class="cont">
  <div class='each-game'>game name</div>
  <div class='each-game'>game name</div>
  <div class='each-game'>game name</div>
  <div class='each-game'>game name</div>
  <div class='each-game'>game name</div>
  <div class='each-game'>game name</div>
  <div class='each-game'>game name</div>
  <div class='each-game'>game name</div>
  <div class='each-game'>game name</div>
  <div class='each-game'>game name</div>
  <div class="dummy"></div>
  <div class="dummy"></div>
  <div class="dummy"></div>
  <div>