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

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

注意：如果flex-children的垂直方向是flex-direction，则您要使用align-items属性而不是flex-container上的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>

如何在Flexbox div中左右对齐两个范围

1 个答案: