柔韧性：与其他宽度相同的包装物品 [英] Flex: wrapped items with same width as the rest
问题描述
我正在使用flex创建一个多列列表，该列表根据容器的宽度调整列数。
I'm using flex to create a multi column list that adjusts the number of columns based on the width of the container.
我发现的问题是，如果我想通过将flex-grow设置为1来使用父级的完整宽度，最后一个包装行中的项目未对齐，因为它们试图填充父级。
The problem I found is that if I want to use the full width of the parent by setting flex-grow to 1, the items in the last wrapped row are misaligned, since they try to fill the parent.
我发现了两种对我不起作用的解决方法：一种使用媒体查询，由于父级的视口宽度不同，因此无法使用它；另一个使用的是列，但我不能使用它，因为它会导致轮廓被切掉和包裹的问题，这在我的实际设置中就存在。
I found two workarounds that don't work for me: one used media queries, which I can't use because the parent is not the same width of the viewport; the other was using columns, but I can't use it because it causes issues with outlines being cut off and wrapped, which I have in my real setup.
问：
是否可以使所有项目具有相同的宽度，同时在完整行中填充父项？
Q: Is there a way to make all items have the same width while filling the parent on full rows?
* {
box-sizing: border-box;
}
.wrapper {
border: 1px solid red;
width: 50%;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
margin: -1em -1em 0 0;
}
li {
border: 1px solid black;
padding: 1em;
margin: 1em 1em 0 0;
flex: 1 1 10em;
}
<div class="wrapper">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
</div>
https://plnkr.co/edit/0u2QxcdLkDfhwV3zASrM
调整大小，直到在最后一行中获得2个项目。
Resize until you get 2 items in the last row.
推荐答案
添加一些额外的flex项目并使它们不可见将其高度/填充/边框设置为0 /无。
根据需要的列数，它需要花费的时间就会减少一遍。
Add a few extra flex items and make them "invisible" by setting their height/padding/border to 0/none. Based on how many columns you'll need, it takes one less for it to work.
* {
box-sizing: border-box;
}
.wrapper {
border: 1px solid red;
width: 100%;
max-width: 800px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
margin: -1em -1em 0 0;
}
li {
border: 1px solid black;
padding: 1em;
margin: 1em 1em 0 0;
flex: 1 1 10em;
}
li:nth-last-child(-n+3) {
height: 0;
border: none;
padding: 0;
margin: 0 1em 0 0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="wrapper">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
如果除多余元素之外的所有元素都有内容，您还可以使用此CSS规则（感谢 Rick Hitchcock ）
If all but the extra elements has a content, you could also use this CSS rule (thanks to Rick Hitchcock)
li:empty {
height: 0;
border: none;
padding: 0;
margin: 1em 1em 0 0;
}
如果列数永远不会超过3，一个可以使用伪元素。 （好吧，只要最后一行中的项目不超过2个，列就可以更多）
If the amount of columns never will be more than 3, one can use pseudo elements. (Well, the columns can be more as long as there will never be more than 2 items missing on the last row)
* {
box-sizing: border-box;
}
.wrapper {
border: 1px solid red;
width: 100%;
max-width: 800px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
margin: -1em -1em 0 0;
}
li {
border: 1px solid black;
padding: 1em;
margin: 1em 1em 0 0;
flex: 1 1 10em;
}
ul::before, ul::after {
content: '';
height: 0;
border: none;
padding: 0;
margin: 0 1em 0 0;
flex: 1 1 10em;
order: 999; /* they need to be last */
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="wrapper">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
</div>
</body>
</html>
这篇关于柔韧性：与其他宽度相同的包装物品的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
