使用flexbox显示锦标赛括号

Question

我正在尝试使用flexbox来显示锦标赛支架，就像NCAA支架一样。这是一个plunk：

@import "//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css";
.game {
  width: 50px;
  height: 20px;
  background-color: lightgrey;
  margin: 2px;
}
.game:after {
  content: 'game';
}
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 384px;
}

<div class="row">
  <!--Round 1-->
  <div class="container col-sm-1">
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
  </div>
  <!--Round 2-->
  <div class="container col-sm-1">
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
  </div>
  <!--Round 3-->
  <div class="container col-sm-1">
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
  </div>
  <!--Round 4-->
  <div class="container col-sm-1">
    <div class=game></div>
    <div class=game></div>
  </div>
  <!--Round 5-->
  <div class="container col-sm-1">
    <div class=game></div>
  </div>
</div>

我不是CSS专家，但我的思维过程是，如果每列中divs的数量与前一列完全相同，如果使用space-around，则div应自动对齐正确（以前几轮比赛为中心）。他们有点对齐，但并不完全集中在正确的游戏之间。我错过了什么？

Answer 1

问题是bootstrap会插入一些伪元素，这些伪元素会在顶部和底部添加额外的空间：

.container::after, .container::before {
  display: table;
  content: " ";
}

所以只需删除bootstrap并添加：

.row {
    display: flex;
}

＆＃13;

＆＃13;

.row {
  display: flex;
}
.game {
  width: 50px;
  height: 20px;
  background-color: lightgrey;
  margin: 2px;
}
.game:after {
  content: 'game';
}
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 384px;
}

＆＃13;

<div class="row">
  <!--Round 1-->
  <div class="container col-sm-1">
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
  </div>
  <!--Round 2-->
  <div class="container col-sm-1">
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
  </div>
  <!--Round 3-->
  <div class="container col-sm-1">
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
  </div>
  <!--Round 4-->
  <div class="container col-sm-1">
    <div class=game></div>
    <div class=game></div>
  </div>
  <!--Round 5-->
  <div class="container col-sm-1">
    <div class=game></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

或者你可以使用bootstrap但是避免使用container类：

＆＃13;

＆＃13;

@import "//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css";
.game {
  width: 50px;
  height: 20px;
  background-color: lightgrey;
  margin: 2px;
}
.game:after {
  content: 'game';
}
.row > div {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 384px;
}

＆＃13;

<div class="row">
  <!--Round 1-->
  <div class="col-sm-1">
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
  </div>
  <!--Round 2-->
  <div class="col-sm-1">
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
  </div>
  <!--Round 3-->
  <div class="col-sm-1">
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
  </div>
  <!--Round 4-->
  <div class="col-sm-1">
    <div class=game></div>
    <div class=game></div>
  </div>
  <!--Round 5-->
  <div class="container col-sm-1">
    <div class=game></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需浮动支架，使它们水平排列而不是垂直排列：.container{float:left;}

body{ background-color: ivory; }
.game {
  width: 50px;
  height: 20px;
  background-color: lightgrey;
  margin: 2px;

}
.game:after {
  content: 'game';
}
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height:384px;
  float:left;
}

<div class="row">
  <!--Round 1-->
  <div class="container col-sm-1">
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
  </div>
  <!--Round 2-->
  <div class="container col-sm-1">
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
  </div>
  <!--Round 3-->
  <div class="container col-sm-1">
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
    <div class="game"></div>
  </div>
  <!--Round 4-->
  <div class="container col-sm-1">
    <div class=game></div>
    <div class=game></div>
  </div>
  <!--Round 5-->
  <div class="container col-sm-1">
    <div class=game></div>
  </div>
</div>