<分区>
标签 javascript html css
<分区>
我有一个填满浏览器宽度的标题栏。我有两项文本，我想要的一项在左边，另一项在右边。我如何实现这一目标？
到目前为止的代码
<div className="logtailTitle">
<span>{this.props.initialDataReceived ? this.props.logtailApplicationName : null}</span>
<span>{this.props.initialDataReceived ? this.props.logtailPathName : null}</span>
</div>
.logtailTitle {
flex: 0 4em;
background-color: #555;
color: #bbb;
vertical-align: middle;
display: flex;
font-style: italic;
font-size: 12px;
padding: 7px 15px 8px 15px;
}
最佳答案
您可以在 flex-container 上设置 justify-content: space-between 属性，或者您可以在第二个元素上使用 margin-left: auto ，这将推送它在右侧。
注意:对于 flex-children 的垂直对齐，如果 flex-direction 是行，你想在 flex 上使用 align-items 属性而不是 vertical-align -容器。
.logtailTitle {
display: flex;
justify-content: space-between;
box-sizing: border-box;
background-color: #555;
font-style: italic;
padding: 7px 15px 8px 15px;
color: #bbb;
font-size: 12px;
width: 100%;
}<div class="logtailTitle">
<span>left</span>
<span>right</span>
</div>关于javascript - 如何左/右对齐 flexbox div 中的两个跨度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57039927/