我有一个简单的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>


当前回答

尽管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>

其他回答

一种技术是插入一些额外的元素(与您希望在一行中拥有的最大元素数量一样多),这些元素的高度为零。空间仍然是分开的,但多余的行塌陷为空:

http://codepen.io/dalgard/pen/Dbnus

body { padding: 5%; } div { overflow: hidden; background-color: yellow; } ul { display: flex; flex-wrap: wrap; margin: 0 -4px -4px 0; list-style: none; padding: 0; } li { flex: 1 0 200px; height: 200px; border-right: 4px solid black; border-bottom: 4px solid black; background-color: deeppink; } li:empty { height: 0; border: none; } *, :before, :after { box-sizing: border-box; } <div> <ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> <li>h</li> <li>i</li> <li>j</li> <li>k</li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>

在未来,这可以通过在(n)后使用多个::实现。

正如其他海报所提到的-没有干净的方法来左对齐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演示(调整大小以查看效果)

有一种没有flexbox的方法,尽管您需要满足以下条件。1)容器有填料。2)项目是相同的大小,你确切地知道你想要多少每行。

ul {
  padding: 0 3% 0 5%;
}
li {
  display: inline-block; 
  padding: 0 2% 2% 0;
  width: 28.66%;
}

容器右侧较小的填充允许每个列表项右侧的额外填充。假设与列表对象相同的父对象中的其他项被填充了0 5%,它将与它们齐平。你也可以调整百分比到你想要的幅度,或者使用计算px值。

当然,你也可以使用n -child (IE 9+)来删除每第三个框上的空白。

可以使用“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

这很老套,但对我来说很管用。我试图达到一致的间距/边距。

.grid {
  width: 1024px;
  display: flex;
  flex-flow: row wrap;
  padding: 32px;
  background-color: #ddd;  

  &:after {
    content: "";
    flex: auto;
    margin-left:-1%;
  }

  .item {
    flex: 1 0 24.25%;
    max-width: 24.25%;
    margin-bottom: 10px;
    text-align: center;
    background-color: #bbb;

    &:nth-child(4n+2),
    &:nth-child(4n+3),
    &:nth-child(4n+4) {
      margin-left: 1%;
    }

    &:nth-child(4n+1):nth-last-child(-n+4),
      &:nth-child(4n+1):nth-last-child(-n+4) ~ .item {
        margin-bottom: 0;
    }    

  }
}

http://codepen.io/rustydev/pen/f7c8920e0beb0ba9a904da7ebd9970ae/