文章/答案/技术大牛

发布

社区首页 >问答首页 >如何渲染每行最多4个项目

问如何渲染每行最多4个项目
EN

Stack Overflow用户

提问于 2019-05-22 02:27:09

回答 1查看 33关注 0票数 0

因此，我有一个从数据库获取游戏数组的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

有没有人可以帮我解决这个问题，或者告诉我一个更好的方法？非常感谢。

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-05-22 02:39:13

这不是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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56244362

复制

相似问题

问如何渲染每行最多4个项目
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何渲染每行最多4个项目EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何渲染每行最多4个项目
EN