Flex-box:将最后一行与网格对齐 [英] Flex-box: Align last row to grid
问题描述
我有一个简单的 flex-box 布局,其中包含一个容器,例如:
.grid {显示:弹性;flex-flow:行包装;对齐内容:间隔;}
现在我希望最后一行中的项目与另一行对齐.应该使用 justify-content: space-between;
因为可以调整网格的宽度和高度.
目前看起来像
在这里,我希望右下角的项目位于中间列"中.实现这一目标的最简单方法是什么?这是一个显示这种行为的小 jsfiddle.
.exposegrid {显示:弹性;flex-flow:行包装;对齐内容:间隔;}.exposetab {宽度:100px;高度:66px;背景颜色:rgba(255, 255, 255, 0.2);边框:1px 实心 rgba(0, 0, 0, 0.4);边框半径:5px;box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);底边距:10px;}
<div class="exposetab"></div><div class="exposetab"></div><div class="exposetab"></div><div class="exposetab"></div><div class="exposetab"></div><div class="exposetab"></div><div class="exposetab"></div><div class="exposetab"></div><div class="exposetab"></div><div class="exposetab"></div><div class="exposetab"></div><div class="exposetab"></div><div class="exposetab"></div><div class="exposetab"></div>
添加 ::after
自动填充空间.无需污染您的 HTML.这是一个显示它的代码笔:http://codepen.io/DanAndreasson/pen/ZQXLXj
.grid {显示:弹性;flex-flow:行包装;对齐内容:间隔;}.grid::after {内容: "";弹性:自动;}
I have a simple flex-box layout with a container like:
.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
Now I want the items in the last row to be aligned with the other. justify-content: space-between;
should be used because the width and height of the grid can be adjusted.
Currently it looks like
Here, I want the item in the bottom right to be in the "middle column". What is the simplest way to accomplish that? Here is a small jsfiddle that shows this behaviour.
.exposegrid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.exposetab {
width: 100px;
height: 66px;
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(0, 0, 0, 0.4);
border-radius: 5px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}
<div class="exposegrid">
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
<div class="exposetab"></div>
</div>
Add a ::after
which autofills the space. No need to pollute your HTML. Here is a codepen showing it: http://codepen.io/DanAndreasson/pen/ZQXLXj
.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.grid::after {
content: "";
flex: auto;
}
这篇关于Flex-box:将最后一行与网格对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!