我有一个简单的flex-box布局的容器，如:
.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
现在我想让最后一行中的项目与其他项目对齐。justify-content:之间的空间;应使用，因为网格的宽度和高度是可以调节的。
目前看来
在这里，我希望右下角的项目在“中间一列”中。最简单的方法是什么?下面是一个展示这种行为的小jsfiddle。
.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>
这里是另外两个scss mixins。
这些mixins假定你不会使用像Isotope这样的js插件(它们不尊重html标记顺序，因此会打乱css n条规则)。
此外，您将能够充分利用它们，特别是当您以移动优先的方式编写响应性断点时。理想情况下，您将在较小的断点上使用flexbox_grid()，在以下断点上使用flexbox_cell()。Flexbox_cell()将负责重置先前设置的不再用于较大断点的边距。
顺便说一下，只要你正确地设置了容器的flex属性，如果需要的话，你也可以只在项目上使用flexbox_cell()。
代码如下:
// apply to the container (for ex. <UL> element)
@mixin flexbox_grid($columns, $gutter_width){
display: flex;
flex-direction:row;
flex-wrap:wrap;
justify-content: flex-start;
> *{
@include flexbox_cell($columns, $gutter_width);
}
}
// apply to the cell (for ex. a <LI> element)
@mixin flexbox_cell($columns, $gutter_width){
$base_width: 100 / $columns;
$gutters: $columns - 1;
$gutter_offset: $gutter_width * $gutters / $columns;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto; // IE10 doesn't support calc() here
box-sizing:border-box; // so you can freely apply borders/paddings to items
width: calc( #{$base_width}% - #{$gutter_offset} );
// remove useless margins (for cascading breakponts)
&:nth-child(#{$columns}n){
margin-right: 0;
}
// apply margin
@for $i from 0 through ($gutters){
@if($i != 0){
&:nth-child(#{$columns}n+#{$i}){
margin-right: $gutter_width;
}
}
}
}
用法:
ul{
// just this:
@include flexbox_grid(3,20px);
}
// and maybe in following breakpoints,
// where the container is already setted up,
// just change only the cells:
li{
@include flexbox_cell(4,40px);
}
显然，这取决于你最终设置容器的填充/边距/宽度和单元格的底部边距等。
希望能有所帮助!
尽管Flexbox即将出现缺口，但我将添加一个有效的解决方案。
它使用兄弟组合子检查2个条件。
它检查的第一个条件是元素是否位于倒数第二div:
对于4列布局，我们需要检查位置2和3
检查它是否在第4个div的第二行:第n -of-type(4n+2)或第3行div:第n -of-type(4n+3)
对于3列布局，我们只需要检查位置2
div:nth-of-type(3n+2)
然后我们可以像下面这样组合4列布局
div:nth-last-child(2) + div:nth-of-type(4n+2)
div:nth-last-child(2) + div:nth-of-type(4n+3)
我们还需要注意一种边情况，任何3n+2且倍数为4的数字都将得到35%的右边距div:n -last-child(2) + div:n -of-type(4n+4)
3栏布局将
div:nth-last-child(2) + div:nth-of-type(3n+2)
然后我们需要给上面的选择器添加一个边距。右边的差额将需要计算，并将取决于弹性基制。
我添加了一个带有3列和4列的示例和一个媒体查询。我还添加了一个小的JavaScript按钮，添加了一个新的div，所以你可以检查它的工作。
它有点像CSS，但很好用。
如果你想要更多的解释，我也在我的网站上写过。
https://designkojo.com/css-programming-using-css-pseudo-classes-and-combinators
var number = 11;
$("#add").on("click", function() {
number = number + 1;
$("#main").append("<div>" + number + "</div>");
});
body {
margin: 0;
}
main{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start; /* vertical */
justify-content: space-between;
min-width: 300px;
max-width: 1200px;
margin: 20px auto;
background-color: lightgrey;
height: 100vh;
}
div {
flex-basis: 30%;
background-color: #5F3BB3;
min-height: 20px;
height: 50px;
margin-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
color: #9af3ff;
font-size: 3em;
}
div:nth-last-child(2) + div:nth-of-type(3n+2) {
background-color: #f1b73e;
margin-right: 35%;
}
@media screen and (min-width: 720px) {
div {
flex-basis: 22%;
}
div:nth-last-child(2) {
background-color: greenyellow;
}
div:nth-of-type(4n+2) {
background-color: deeppink;
}
/* Using Plus combinator is for direct sibling */
div:nth-last-child(2) + div:nth-of-type(4n+2) {
background-color: #f1b73e;
margin-right: 52%;
}
div:nth-last-child(2) + div:nth-of-type(4n+3) {
background-color: #f1b73e;
margin-right: 26%;
}
/* Also need to set the last to 0% to override when it become (3n+2)
* Any number that is 3n+2 & multiple of 4 will get the 35% margin-right
* div:nth-last-child(2) + div:nth-of-type(3n+2)
*/
div:nth-last-child(2) + div:nth-of-type(4n+4) {
background-color: #f1b73e;
margin-right: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>My New Project</title>
</head>
<body>
<header>
</header>
<button id="add">Add</button>
<main id="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="action.js"></script>
</body>
</html>
这里有一些解决方案，人们建议编写精确的布局css类，使用伪元素伪造最后一项，使用非flexbox方法等。
一个大问题是邻居之间的间隙(大小写对齐的按钮包装到多行)。在这种情况下，你不希望物品相互接触，就需要有空隙。我只是想添加一个适当的解决方案，尊重差距，并适用于任何数量的项目。它也是基于假的最后一个元素的想法，但更普遍。有关详细信息，请参阅代码片段注释。
html {
font-size: 1px;
}
.container {
font-size: 16rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
background-color: orange;
border-radius: 10rem;
box-sizing: border-box;
color: white;
margin-bottom: 10rem;
padding: 15rem 10rem;
text-align: center;
}
<!--
Our setup from design (example) used later in calculations:
container-width: 100%; (can be any)
max-per-row = 4;
total = 6;
desired-hor-gap = 10rem; (equal to vert. gap)
If you go dynamic (drawing html according to the coming data either in a backend template or in a frontend template), you have to calculate and then set exact properties inline.
<i> (or any real html element) is needed to set inline styles to arrange the last row properly.
"2" in <i> calc function - is 6 % 4 since calc doesn't allow for "%" operator. But in real life you will calculate these numbers in JS or some backend template anyway.
Formulas written in elements' calc functions. Seem to be self-descriptive, but the idea is to set for the last fake item the remainder width + hypothetical gaps.
-->
<div class="container">
<div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div>
<div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div>
<div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div>
<div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div>
<div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div>
<div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div>
<i style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4 * (4 - 2) + ( 4 - 2 - 1) * 10rem);"></i>
</div>
