Центр, за исключением случаев, когда произойдет перекрытие

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, вы можете использовать оправдает-контента декларации вместо выравнивания текста.

Как это:

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

Там есть большая статья об этом here.