在两列中创建灵活列表时的CSS问题
在两列中创建灵活列表时的CSS问题
提问于 2022-06-12 12:27:50
我希望使用flex属性在两个列中有一个列表，并在每个项的内容超出显示时成为一个列。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
.flexcontainer {
display: flex;
flex-wrap: wrap;
}
.leftflex,
.rightflex {
box-sizing: border-box;
flex: 50%;
}
body {font-size: 30px;}
</style>
</head>
<body>
<ul class="flexcontainer">
<span class="leftflex">
<li>1 Lorem, ipsum.</li>
<li>2 Lorem, ipsum.</li>
</span>
<span class="rightflex">
<li>3 Lorem, ipsum.</li>
<li>4 Lorem, ipsum.</li>
</span>
</ul>
</body>
</html>
但是这里有两个问题：
- 当我使屏幕尺寸变小时，每一项都变成两行，但我希望在这之前有一个列。
我想要这个：
但我有这个：
如果我为列表设置了white-space: nowrap;，那么即使在一个列中，文本也不会包装，这对于长项来说是个问题：
我知道我可以使用@media (max-width: #px)，但我希望根据内容更改flex和包装属性，而不仅仅是屏幕大小。
显然，
- flex在拟合内容时没有考虑列表中的要点，我不知道如何解决这个问题。
(我试图使用calc函数来设置flex: calc(50%-10px)，但没有成功) :。
回答 3
Stack Overflow用户
回答已采纳
发布于 2022-06-12 13:22:54
- 的问题在于
flex-basis。如果删除flex: 50%(基本上意味着flex-grow: 1和flex-basis: 50%)，则实际上将flex-basis设置为auto，并在文本开始包装之前获取1列。(可能希望保持flex-grow，以便整个容器仍然占据整行)。 - 关于子弹，您可以指定
list-style-position: inside，这将消除奇怪的重叠。
。
您的代码如下所示：
.flexcontainer {
display: flex;
flex-wrap: wrap;
list-style-position: inside;
}
.leftflex,
.rightflex {
box-sizing: border-box;
flex-grow: 1;
}Stack Overflow用户
发布于 2022-06-12 12:40:38
你可以和网格一起使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
.flexcontainer {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr) ) ;
}
.leftflex,
.rightflex {
box-sizing: border-box;
flex: 50%;
}
body {font-size: 30px;}
</style>
</head>
<body>
<ul class="flexcontainer">
<span class="leftflex">
<li>1 Lorem, ipsum.</li>
<li>2 Lorem, ipsum.</li>
</span>
<span class="rightflex">
<li>3 Lorem, ipsum.</li>
<li>4 Lorem, ipsum.</li>
</span>
</ul>
</body>
</html>
Stack Overflow用户
发布于 2022-06-12 12:55:14
您可以使用flex-basis来定义您希望它开始包装的宽度。若要防止列表中有更多文本时的符号重叠，可以添加一些填充以进行补偿。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
.flexcontainer {
display: flex;
flex-wrap: wrap;
margin: 0 -1rem;
}
.leftflex,
.rightflex {
box-sizing: border-box;
flex: 50%;
flex-basis: 250px;
padding: 0 1rem;
}
body {font-size: 30px;}
</style>
</head>
<body>
<ul class="flexcontainer">
<span class="leftflex">
<li>1 Lorem, ipsum. flex-basis flex-basis flex-basis</li>
<li>2 Lorem, ipsum. flex-basis flex-basis</li>
</span>
<span class="rightflex">
<li>3 Lorem, ipsum. flex-basis flex-basis</li>
<li>4 Lorem, ipsum.</li>
</span>
</ul>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72592202
复制相关文章
相似问题
腾讯云开发者
