Flex:包装物品的宽度与其余物品相同
我正在使用flex创建一个多列列表,根据容器的宽度调整列数.
我发现的问题是,如果我想通过将flex-grow设置为1来使用父级的全宽度,则最后一个包装行中的项目将不对齐,因为它们会尝试填充父级.
我找到了两个对我不起作用的解决方法:一个使用媒体查询,我无法使用,因为父级视口的宽度不同; 另一个是使用columns,但我不能使用它,因为它导致轮廓被切断和包裹的问题,我在我的真实设置中.
问: 有没有办法让所有项目在完整行上填充父项时具有相同的宽度？
* {
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个项目.
添加一些额外的flex项,并通过将它们的高度/填充/边框设置为0/none来使它们"不可见".根据您需要的列数,可以减少一个列的工作量.
* {
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)
li:empty {
height: 0;
border: none;
padding: 0;
margin: 1em 1em 0 0;
}
如果列的数量永远不会超过3,则可以使用伪元素.(好吧,只要最后一行不会丢失超过2个项目,列就可以更多了)
* {
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>