中心除非发生重叠

Question

我正在尝试完成包含3个组件的工具栏布局。左侧和中间的大小是灵活的，我不认为标准的响应断点可以完成这项工作。当空间允许时，柔性中心应相对于视口居中。但是，如果中间和左侧重叠，则允许中心部分偏离中心，以避免隐藏内容。

具有宽视口的工具栏：

具有窄视口的工具栏。注意章节标题不是完全居中。这是可取的，因为它会与面包屑重叠：

我想也许flexbox可以做到这一点，但我正在努力让它发挥作用。以下是我使用flexbox进行的尝试。

HTML：

<div class="toolbar">
  <div>Site / Section A / Section A1 / Section A1b</div>
  <div class="section-title">This Section Title</div>
  <div>Site Search</div>
</div>

CSS：

.toolbar {
  display: flex;
  background-color: #3F51B5;
  color: white;
  padding: 10px 0;
}

.section-title {
  flex-grow: 1;
  text-align: center;
}

http://plnkr.co/edit/YoD0yLWliXhu191jUrv4?p=preview

Answer 1

当您使用flexbox时，您可以使用justify-content声明而不是text-align。

像这样：

.section-title {
  justify-content:space-between;
}

有一篇很棒的文章here。