哈巴狗跨度无法在Flex div中正确呈现

如何解决哈巴狗跨度无法在Flex div中正确呈现

我正在使用span标签为一行中的单词设置不同的颜色：

CSS：

#some-panel{ 
display: flex; 
flex-flow: 
column wrap; 
justify-content: center; 
align-items: center; 
align-content: center; 
width: 100%; 
grid-row-start: 1;  }

Pug不在一行上渲染，而是放置了3个中断：

div#some-panel <span id="abs">Text |</span><span style="color:#b7bdc9;"> of another</span><span style="color:#ca6782;"> color</span>

我也尝试过：

div#some-panel #[span text | ] #[span(style="color:#b7bdc9;") of another] #[span(style="color:#ca6782;") color]

但是没有运气。 如果我删除了CSS中所有的flex部分，pug会正确渲染单行，但是我没有灵活的div :)。 我想念什么？谢谢

解决方法

将flex-direction设置为row，并使用flex-wrap: nowrap避免换行。

css：

#some-panel {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    grid-row-start: 1;
}

pug：

div#some-panel 
    span#abs Text |
    span(style="color:#b7bdc9;") of another
    span(style="color:#ca6782;") color