flex中的换行符[重复]
发布于2022-06-29 22:15 阅读(1382) 评论(0) 点赞(17) 收藏(4)
我已经完成了使用 flex 时插入换行符的答案。不过，我的情况有点不同。
我有一个左栏和一个右栏。无论如何，左列应始终为 200px。右列需要包含三列，然后换行到接下来的三列。
正如我已经指定 flex-wrap: nowrap; 这往往会使事情复杂化。
如果可能的话，有什么想法吗？我确信它一定是，但我一直在反对这个没有解决方案。
.flex {
display: flex;
flex-wrap: nowrap;
}
.line-break {
width: 100%;
}
.leftcol {
width: 200px;
border: 1px solid green;
}
.rightcol {
display: flex;
flex-wrap: wrap;
width: 100%;
border: 1px solid blue;
}
.rightcol div {
width: 100px;
margin: 1%;
border: 1px solid red;
}<div class="flex">
<div class="leftcol">
Stuff
</div>
<div class="rightcol">
<div>1</div>
<div>2</div>
<div>3</div>
<div class="line-break"></div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>解决方案
您需要将.line-break的高度设置为1px，并且当您从中选择 div 元素时.rightcol，不要选择.line-break，而只选择包含数字的 div 元素，如下所示：
.flex {
display: flex;
flex-wrap: nowrap;
}
.line-break {
width: 100%;
height: 1px;
}
.leftcol {
width: 200px;
border: 1px solid green;
}
.rightcol {
display: flex;
flex-wrap: wrap;
width: 100%;
border: 1px solid blue;
}
.rightcol div:not(.line-break) {
width: 100px;
margin: 1%;
border: 1px solid red;
} <div class="flex">
<div class="leftcol">
Stuff
</div>
<div class="rightcol">
<div>1</div>
<div>2</div>
<div>3</div>
<div class="line-break"></div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/377098/3de195edf30421fc8f84/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力