Question

我无法弄清楚如何使用两列（当屏幕尺寸缩小时会缩小到一个大列中）显示其整个内容而不会重叠。 Here's the images of what is happening第一个是应用程序在更大的屏幕上，其中flex-direction设置为row。当屏幕尺寸较小时，我将它的灵活方向切换到列，这很有效，除了我无法弄清楚如何使趋势向上停止的第二行（趋势向下）开始，这可能是什么。相反，它就像你在图像中看到的那样在它的中间开始第二列。

这里是完整尺寸的代码：

.playersColumns {
display: flex;
flex-direction: row;
justify-content: center;
padding-top: 28px;
align-items: center;
} 

.playersBody {
flex-wrap: wrap;
min-width: 255px;
}

这是宽度＆lt; 600px（发生问题的地方）

.playersColumns {
display: flex;
flex-direction: column;
justify-content: space-between;
padding-left: 52px;
}

如您所见，玩家正在进入数据库，正在显示和投票。如果只有2名玩家，或者在Trending Up中列出20名玩家，我需要让它排在另一个区域之上。

这里是React：

<div className="playersColumns">
      <div className="playersBody">
        <span className="trendHeaderUp">TRENDING UP</span>
        {
          orderedPlayersUp.map((player) => {
            return (
              <Player
                playerContent={player.playerContent}
                playerId={player.id}
                key={player.id}
                upvotePlayer={this.upvotePlayer}
                downvotePlayer={this.downvotePlayer}
                userLogIn={this.userLogIn}
                userLogOut={this.userLogOut}
              />
            )
          })
        }
      </div>
      <div className="playersBody">
        <span className="trendHeaderDown">TRENDING DOWN</span>
        {
          orderedPlayersDown.map((player) => {
            return (
              <Player
                playerContent={player.playerContent}
                playerId={player.id}
                key={player.id}
                upvotePlayer={this.upvotePlayer}
                downvotePlayer={this.downvotePlayer}
                userLogIn={this.userLogIn}
                userLogOut={this.userLogOut}
              />
            )
          })
        }
      </div>
    </div>

Answer 1

以下屏幕尺寸代码＆lt; 600应该工作：

.playersColumns {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-top: 28px;
  align-items: center;
  flex-wrap: wrap;
}

当元素不适合另一个元素并且将其移动到下一行时，它会添加换行。当使用较小的屏幕尺寸时，使元素本身的宽度为100％是明智的。

Answer 2

我用

解决了这个问题

.playersBody {
height: auto;   <---- My height for the body area was not large and was causing it to scrunch up -- so I set it to auto.
flex-wrap: wrap;
min-width: 255px;
}


@media (max-width: 600px) {
.playersColumns {
display: flex;
/*flex: 1 0 165%;*/
flex-wrap: wrap;
align-content: space-between;
padding-left: 54px;
}
}

CSS Flex间距问题

2 个答案: