我正在尝试使用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应自动对齐正确(以前几轮比赛为中心)。他们有点对齐,但并不完全集中在正确的游戏之间。我错过了什么?
答案 0 :(得分:3)
问题是bootstrap会插入一些伪元素,这些伪元素会在顶部和底部添加额外的空间:
.container::after, .container::before {
display: table;
content: " ";
}
所以只需删除bootstrap并添加:
.row {
display: flex;
}
.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;
或者你可以使用bootstrap但是避免使用container
类:
@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;
答案 1 :(得分: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>