使用flexbox显示锦标赛括号

时间:2015-04-25 20:32:40

标签: css css3 flexbox

我正在尝试使用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应自动对齐正确(以前几轮比赛为中心)。他们有点对齐,但并不完全集中在正确的游戏之间。我错过了什么?

2 个答案:

答案 0 :(得分:3)

问题是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;

答案 1 :(得分:2)

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

enter image description here

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>