我有一个带有min-height的flexbox页面元素,其中包含一个包含行的容器,并且这些行包含事件。行高在容器高度上均匀分布,如下例所示:
http://codepen.io/tysonnero/pen/LWXaMG
HTML
<div class="page">
<div class="container">
<div class="row">
<div class="event">Event 1</div>
<div class="event">Event 2</div>
</div>
<div class="row">
<div class="event">Event 1</div>
</div>
<div class="row">
<div class="event">Event 1</div>
</div>
<div class="row">
<div class="event">Event 1</div>
</div>
</div>
</div>
CSS
.page {
min-height: 300px;
display: flex;
}
.container {
display: flex;
flex: 1;
flex-direction: column;
border: solid 1px #eee;
}
.row {
display: flex;
flex: 1;
flex-direction: column;
border: solid 1px #eee;
}
但是,如果我向该行添加了几个附加事件,则事件会溢出到下一行:
http://codepen.io/tysonnero/pen/bqQyeG
HTML
<div class="page">
<div class="container">
<div class="row">
<div class="event">Event 1</div>
<div class="event">Event 2</div>
<div class="event">Event 3</div>
<div class="event">Event 4</div>
<div class="event">Event 5</div>
<div class="event">Event 6</div>
</div>
<div class="row">
<div class="event">Event 1</div>
</div>
<div class="row">
<div class="event">Event 1</div>
</div>
<div class="row">
<div class="event">Event 1</div>
</div>
</div>
</div>
我可以通过从.page中删除display:flex来解决这个问题,但是当行内容最小时,这会导致行无法均匀分布最小高度。
有什么能推荐最好的工作方法吗?
答案 0 :(得分:1)
您似乎只想从flex: 1
中移除.row
属性,使用特定属性flex
的缩写(如flex-grow: 1
),或指定每个属性您想要在速记属性中使用的值。
.page {
min-height: 300px;
display: flex;
}
.container {
display: flex;
flex: 1;
flex-direction: column;
border: solid 1px #eee;
}
.row {
display: flex;
flex-direction: column;
border: solid 1px #eee;
flex-grow: 1;
}
&#13;
<div class="page">
<div class="container">
<div class="row">
<div class="event">Event 1</div>
<div class="event">Event 2</div>
<div class="event">Event 3</div>
<div class="event">Event 4</div>
<div class="event">Event 5</div>
<div class="event">Event 6</div>
</div>
<div class="row">
<div class="event">Event 1</div>
</div>
<div class="row">
<div class="event">Event 1</div>
</div>
<div class="row">
<div class="event">Event 1</div>
</div>
</div>
</div>
&#13;
答案 1 :(得分:1)
将.row
的{{1}}属性更新为flex
。
flex: 1 0 auto;
属性是flex
,flex-grow
和flex-shrink
的简写。通过将第二个值设置为flex-basis
,我们告诉那些弹性项目不会缩小并保持其原始大小。
0
.page {
min-height: 300px;
display: flex;
}
.container {
display: flex;
flex: 1;
flex-direction: column;
border: solid 1px #eee;
}
.row {
display: flex;
flex: 1 0 auto;
flex-direction: column;
border: solid 1px #eee;
}