我有一个简单的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>
可以使用“flex-start”手动添加页边距。它需要一些数学技巧，但绝对容易做到，并且很容易与CSS预处理器(如LESS)一起使用。
请看这个LESS mixin的例子:
.flexboxGridMixin(@columnNumber,@spacingPercent) {
@contentPercent: 100% - @spacingPercent;
@sideMargin: @spacingPercent/(@columnNumber*2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
> * {
box-sizing: border-box;
width: @contentPercent/@columnNumber;
margin-left: @sideMargin;
margin-right: @sideMargin;
}
}
然后它可以很容易地用来显示一个响应式网格布局:
ul {
list-style: none;
padding: 0;
@spacing: 10%;
@media only screen and (max-width: 499px) { .flexboxGridMixin(1,@spacing); }
@media only screen and (min-width: 500px) { .flexboxGridMixin(2,@spacing); }
@media only screen and (min-width: 700px) { .flexboxGridMixin(3,@spacing); }
@media only screen and (min-width: 900px) { .flexboxGridMixin(4,@spacing); }
@media only screen and (min-width: 1100px) { .flexboxGridMixin(5,@spacing); }
}
li {
background: pink;
height: 100px;
margin-top: 20px;
}
这里有一个例子
http://codepen.io/anon/pen/YyLqVB?editors=110
尽管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>
正如其他海报所提到的-没有干净的方法来左对齐flexbox的最后一行(至少按照目前的规范)
然而，它的价值在于:使用CSS Grid Layout模块，这是非常容易的:
基本上相关代码可以归结为:
ul {
display: grid; /* 1 */
grid-template-columns: repeat(auto-fill, 100px); /* 2 */
grid-gap: 1rem; /* 3 */
justify-content: space-between; /* 4 */
}
1)将容器元素设置为网格容器
2)设置网格的自动列宽度为100px。注意使用了自动填充(而不是自动贴合(对于单行布局)将空轨道折叠为0)，导致项目展开以占用剩余空间。当网格只有一行时，这将导致一个合理的“空格”布局，这在我们的情况下不是我们想要的。(请查看这个演示，看看它们之间的区别))。
3)为网格行和列设置间隙/沟槽-在这里，因为想要一个“空间之间”的布局-间隙实际上是一个最小的间隙，因为它会根据需要增长。
4)类似于flexbox。
ul {
显示:网格;
Grid-template-columns: repeat(自动填充，100px);
grid-gap: 1快速眼动;
justify-content:之间的空间;
/*无趣属性*/
list-style:没有;
背景:小麦;
填充:2快速眼动;
宽度:80大众;
保证金:0自动;
}
李{
高度:50 px;
边框:1px纯绿色;
}
< ul >
<李> < /李>
<李> < /李>
<李> < /李>
<李> < /李>
<李> < /李>
<李> < /李>
<李> < /李>
< / ul >
Codepen演示(调整大小以查看效果)
