Flex-box: 将最后一行对齐到网格
Flex-box: 将最后一行对齐到网格
我有一个简单的flex-box布局,容器如下:\n.grid {\n display: flex;\n flex-flow: row wrap;\n justify-content: space-between;\n}\n现在我希望最后一行的项目与其他项目对齐。应该使用justify-content: space-between;
,因为网格的宽度和高度可以调整。目前的样子是这样的:\n\n在这里,我希望右下角的项目在\"中间列\"。最简单的方法是什么?这里有一个小的jsfiddle展示了这个行为。\n.exposegrid {\n display: flex;\n flex-flow: row wrap;\n justify-content: space-between;\n}\n.exposetab {\n width: 100px;\n height: 66px;\n background-color: rgba(255, 255, 255, 0.2);\n border: 1px solid rgba(0, 0, 0, 0.4);\n border-radius: 5px;\n box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);\n margin-bottom: 10px;\n}
问题:Flex-box: Align last row to grid
原因:目前的Flexbox布局方式无法使最后一行的元素对齐网格。
解决方法:一种解决方法是插入一些额外的元素(数量与一行中预计的最大元素数量相同),并将它们的高度设置为零。虽然空间仍然被分配,但多余的行会折叠为零。另一种解决方法是使用伪元素作为额外的子元素,并给它们设置与容器中的项目相同的flex属性。
代码示例:
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; }
- a
- b
- c
- d
- e
- f
- g
- h
- i
- j
- k
以上是一种解决方法,但会导致标记变得不语义化。另一种解决方法是使用伪元素作为额外的子元素,并给它们设置与容器中的项目相同的flex属性。这种方法只能适用于最多有三个项目的每行的弹性网格。
Flex-box: Align last row to grid
在当前规范下,没有一种干净的方法可以使用flexbox将最后一行左对齐。然而,通过CSS Grid布局模块却可以很容易地实现这一点。
解决方法如下:
1) 将容器元素设置为grid容器
2) 设置自动填充宽度为100px的网格列。(请注意使用auto-fill而不是auto-fit,因为后者(对于单行布局)会将空轨道折叠为0,导致项目扩展以占用剩余空间。这将导致当网格只有一行时,产生一个两边对齐的布局,而这不是我们想要的。)
3) 为网格的行和列设置间隔/间距。在这里,由于想要实现“space-between”的布局,间隔实际上是一个最小间隔,因为它会根据需要增长。
4) 与flexbox类似。
以下是示例代码:
ul { display: grid; grid-template-columns: repeat(auto-fill, 100px); grid-gap: 1rem; justify-content: space-between; } li { height: 50px; border: 1px solid green; }
这种方法无法在IE10/11中工作。在当前情况下,这应该是被接受的答案。使用伪元素`:after`可能导致在某些边缘情况下产生意外结果。
这应该是被接受的答案。我会将其与flexbox结合作为备选方案,符合渐进增强的原则:不支持网格的浏览器将显示flexbox版本,对我来说足够接近。
“在当前规范下,没有一种干净的方法可以使用flexbox将最后一行左对齐” - 哈,看看我的答案,它非常简单 🙂
这在Firefox中不起作用。网格间距属性似乎没有效果,而且间距很大。
很棒,很高兴使用CSS Grid如此简单。当我尝试使用包装的`
那么,当你只有几个项目时(在中大屏幕上只创建1行),该怎么办呢?在你的Codepen中,如果将其调整得非常大,单行将左对齐,而不是居中。有没有办法改变这一点,让它在只有一行时居中呢?
问题:如何使用Flex-box使最后一行对齐网格?
原因:此问题的原因是使用Flex-box的justify-content属性设置为space-between时,最后一行的元素无法对齐网格,且元素之间的间距与前一行不同。
解决方法:可以通过在网格容器的::after伪元素中添加样式来解决这个问题。具体的解决方法是设置伪元素的content属性为空字符串,flex属性为auto,这样就可以让伪元素自动填充剩余空间,从而使最后一行的元素对齐网格。
以下是解决方法的代码示例:
.grid { display: flex; flex-flow: row wrap; justify-content: space-between; } .grid::after { content: ""; flex: auto; }
这个解决方法在大多数情况下都能正常工作,但在一些特殊情况下可能会存在问题。例如,当网格容器的子元素宽度不等于100%时,或者使用了flex-grow属性时,这个解决方法可能无法正常工作。在这些情况下,可能需要根据具体情况进行调整或寻找其他解决方法。
通过在Flex-box的网格容器中添加::after伪元素,并设置其属性为auto,可以实现最后一行对齐网格的效果。这个解决方法简单易用,但在一些特殊情况下可能需要进行调整或寻找其他解决方法。