如何在 flexbox div 中左/右对齐两个跨度

Question

我有一个填充浏览器宽度的标题栏。我有两个文本项，一个在左边，另一个在右边。我如何实现这一目标？

到目前为止的代码

<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;
}

Answer 1

您可以justify-content: space-between在 flex-container 上设置属性，也可以margin-left: auto在第二个元素上使用，这会将其推到右侧。

注意：对于 flex-children 的垂直对齐，如果 flex-direction 是 row 你想使用align-items属性而不是vertical-align在 flex-container 上。

.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>