设置.top_three为flex row无效，如何实现前三名横向排列？

我想让.top_three容器内的三个元素横向排列，但设置flex-direction: row后毫无效果；如果把.scoreboard设为row能实现横向排列，但会导致.restplaces也被横向排列，而我希望.restplaces显示在前三名下方。使用Razor组件+CSS开发，相关代码如下：

Razor组件代码 #

@if (Teams is not null)
{
<div class="confetti_container">

    <div class="confetti"></div>
    **(此处还有约20个相同div，未列出)**

</div>
<div class="scoreboard">
    @do
    {
        _place++;
        var allteams = Teams.Where(team => team.TeamPoints == 
        Teams[0].TeamPoints).ToList();


        foreach (var team in allteams)
        {
            <div class="top_three">
                @if (_place == 2)
                {
                    <div class="secondplace">
                        <div class="secondplaceimg"></div>
                        <h1>@team.TeamName</h1>
                    </div>

                }
                @if (_place == 1)
                {
                    <div class="firstplace">
                        <div class="firstplaceimg"></div>
                        <h1>@team.TeamName</h1>
                    </div>
                }
                @if (_place == 3)
                {
                    <div class="thirdplace">
                        <div class="thirdplaceimg"></div>
                        <h1>@team.TeamName</h1>
                    </div>
                }

            </div>
            @if (_place > 3)
            {

                <div class="restplaces">
                    <p>@_place. @team.TeamName</p>
                </div>
            }


            Teams.Remove(team);
        }
        if (Teams.Count == 0)
        {
            _scoreboardCreated = true;
        }
    } while (_scoreboardCreated == false);

</div>

 }
 else if (_deleted is true)
 {
    <h1>Session expired</h1>
 }
 else
 {
    <h1>Loading...</h1>
  }

CSS代码 #

.scoreboard {
display:flex;
flex-direction: column;
text-align: center;
align-items: center;
 }
 .top_three {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
 }

 .firstplace {
  padding: 8vh 5vw 5vh 5vw;
 }

  .firstplaceimg {
  background-image: url("/images/Firstplace.png");
  height: 340px;
  width: 315px;
  }

  .secondplace {
  padding: 15vh 5vw 5vh 5vw;
  }

  .secondplaceimg {
  background-image: url("/images/Secondplace.png");
  height: 270px;
  width: 250px;
  }

  .thirdplace {
  padding: 28vh 5vw 8vh 5vw;
  }

  .thirdplaceimg {
  background-image: url("/images/Thirdplace.png");
  height: 170px;
  width: 155px;
 }

.restplaces {
display:flex;
margin: 0vh 0vw 5vh 3vw;
background-color: #bd8379;
width: 10vw;
border-radius: 20px;
box-shadow: 0 0 5px 2px rgba(0,0,0, .30);
}
/*CONFETTI*/
.confetti_container {
min-height: 70vh;
overflow: hidden;
padding: 60px;
position: absolute;
width: 95%;
}

.confetti {
background: rgb(166,124,0);
background: linear-gradient(0deg, rgba(166,124,0,1) 0%, rgba(191,155,48,1) 10%, 
rgba(255,191,0,1) 20%, rgba(255,207,64,1) 30%, rgba(255,220,115,1) 40%, 
rgba(255,216,99,1) 
50%, rgba(255,220,115,1) 60%, rgba(255,207,64,1) 70%, rgba(255,191,0,1) 80%, 
rgba(191,155,48,1) 90%, rgba(166,124,0,1) 100%);
border: 1px solid #A57C01;
position: absolute;
display: flex;
width: 10px;
height: 25px;
top: -100px;
}

.confetti:nth-child(1) {
    animation: fall 2.5s linear infinite;
    left: 10%;
}

核心问题 #

你的Razor代码逻辑里，每个名次的元素都被单独包裹在一个.top_three容器里——比如第一名生成一个.top_three，第二名又生成一个新的.top_three，第三名再生成第三个。每个.top_three里只有一个子元素，所以flex-direction: row自然看不出横向排列的效果。

修复步骤 #

1. 调整Razor组件的DOM结构：把.top_three容器移到循环外部，仅在_place <=3时，将对应名次的元素插入到同一个.top_three容器中，而不是每个元素都生成新容器。修改后的Razor代码如下：

@if (Teams is not null)
{
<div class="confetti_container">
    <div class="confetti"></div>
    <!-- 此处还有约20个相同div，未列出 -->
</div>
<div class="scoreboard">
    <!-- 统一的top_three容器，存放所有前三名元素 -->
    <div class="top_three">
        @do
        {
            _place++;
            var allteams = Teams.Where(team => team.TeamPoints == Teams[0].TeamPoints).ToList();

            foreach (var team in allteams)
            {
                @if (_place == 2)
                {
                    <div class="secondplace">
                        <div class="secondplaceimg"></div>
                        <h1>@team.TeamName</h1>
                    </div>
                }
                @if (_place == 1)
                {
                    <div class="firstplace">
                        <div class="firstplaceimg"></div>
                        <h1>@team.TeamName</h1>
                    </div>
                }
                @if (_place == 3)
                {
                    <div class="thirdplace">
                        <div class="thirdplaceimg"></div>
                        <h1>@team.TeamName</h1>
                    </div>
                }

                Teams.Remove(team);
            }
            // 前三名处理完成或队伍为空时退出循环
            if (_place >= 3 || Teams.Count == 0)
            {
                break;
            }
        } while (true);
    </div>

    <!-- 单独处理剩余名次 -->
    @do
    {
        _place++;
        var allteams = Teams.Where(team => team.TeamPoints == Teams[0].TeamPoints).ToList();

        foreach (var team in allteams)
        {
            <div class="restplaces">
                <p>@_place. @team.TeamName</p>
            </div>
            Teams.Remove(team);
        }
        if (Teams.Count == 0)
        {
            _scoreboardCreated = true;
        }
    } while (_scoreboardCreated == false);
</div>
}
else if (_deleted is true)
{
    <h1>Session expired</h1>
}
else
{
    <h1>Loading...</h1>
}

2. 保留原CSS无需修改：你的.top_three的flex设置已经正确，修改DOM结构后，三个名次元素会被放入同一个.top_three容器，自然会横向排列；同时.scoreboard保持flex-direction: column，.restplaces会排在前三名下方。

补充说明 #

如果存在并列名次（比如多个队伍分数相同并列第一），上述逻辑也能兼容，allteams会取出所有同分数的队伍，并列的名次元素都会被加入.top_three容器，保持横向排列。

内容的提问来源于stack exchange，提问作者Yumaisch