css Flex布局溢出的换行符[重复]

zkure5ic 于 2023-05-08 发布在其他

关注(0)|答案(1)|浏览(162)

此问题已在此处有答案：

Why are flex items not wrapping?（2个答案）
2天前关闭。
我有两个div在一个Flex的空格之间的容器，我希望他们分裂成两行，在对方的溢出

.container {
    background: wheat;
    padding: 10px;
    width: 300px;
    display: flex;
    justify-content: space-between;
}

<div class="container">
    <div>Lorem ipsum dolor sit amet 1</div>
    <div>Lorem ipsum dolor sit amet 2</div>
</div>

css

来源：https://stackoverflow.com/questions/76177925/line-break-on-flex-layout-overflow

1条答案

按热度按时间

l7mqbcuq1#

“溢出”是指文本换行到多行上吗？如果是这样，除了flex-wrap: wrap;之外，还需要添加white-space: nowrap;。
(But使用这种方法时要小心，除非您非常确定内容要求-如果其中一个文本比容器div长，它就会跳出盒子。）

.container {
    background: wheat;
    padding: 10px;
    width: 300px;
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
    flex-wrap: wrap;
}

<div class="container">
    <div>Lorem ipsum dolor sit amet 1</div>
    <div>Lorem ipsum dolor sit amet 2</div>
</div>

赞(0）回复(0）举报 2023-05-08

我来回答

css Flex布局溢出的换行符[重复]

1条答案

相关问题

热门标签

最新问答