我希望load more按钮在它自己的行上。
但是要使用我的项目，它需要保留在。mod-c-tab-content-row容器中。
我希望有一些特殊的换行，但不确定这在使用Flex时是可能的。
感谢任何帮助。
Codepen here:https://Codepen.io/jacksonjack/pen/mwkpxww
此处代码:
null
.mod-c-tab-content-row {
padding: 15px 15px 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
position: relative;
}
.mod-c-tab-col {
-webkit-box-flex: 1;
-ms-flex: 1 1 33.333333%;
flex: 1 1 33.333333%;
max-width: 33.333333%;
}<div class="mod-c-tab-content-row">
<div class="mod-c-tab-col">
<img src="https://placekitten.com/200/140" class="img-responsive" alt="">
</div>
<div class="mod-c-tab-col">
<img src="https://placekitten.com/200/140" class="img-responsive" alt="">
</div>
<div class="mod-c-tab-col">
<img src="https://placekitten.com/200/140" class="img-responsive" alt="">
</div>
<div class="mod-c-tab-col">
<img src="https://placekitten.com/200/140" class="img-responsive" alt="">
</div>
<div class="mod-c-tab-col">
<img src="https://placekitten.com/200/140" class="img-responsive" alt="">
</div>
<button class="c-btn">Load more</button>
</div>null
通过向按钮添加position:absolute，您可以将按钮移动到其容器的流之外，而无需更改HTML结构:
null
.mod-c-tab-content-row {
padding: 15px 15px 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
position: relative;
}
.mod-c-tab-col {
-webkit-box-flex: 1;
-ms-flex: 1 1 33.333333%;
flex: 1 1 33.333333%;
max-width: 33.333333%;
}
.c-btn {
position: absolute;
bottom: -30px;
left: 50%;
right: 50%;
transform: translate( -50%, 0 );
}<div class="mod-c-tab-content-row">
<div class="mod-c-tab-col">
<img src="https://placekitten.com/200/140" class="img-responsive" alt="">
</div>
<div class="mod-c-tab-col">
<img src="https://placekitten.com/200/140" class="img-responsive" alt="">
</div>
<div class="mod-c-tab-col">
<img src="https://placekitten.com/200/140" class="img-responsive" alt="">
</div>
<div class="mod-c-tab-col">
<img src="https://placekitten.com/200/140" class="img-responsive" alt="">
</div>
<div class="mod-c-tab-col">
<img src="https://placekitten.com/200/140" class="img-responsive" alt="">
</div>
<button class="c-btn">Load more</button>
</div>
将按钮包装在div标记中。
<div class="tab-content-action">
<button class="c-btn">Load more</button>
</div>
和样式部分
.tab-content-action{
-webkit-flex: 0 0 100%;
flex: 0 0 100%;
max-width:100%;
}
