Stretch middle, fixed spacing

A common app and web pattern is to create a top bar where we want to stretch only the middle element, but keep the right most and left most elements fixed. If we just want one element to stretch, we can set a fixed width (e.g. 100px) on an element that should stay static, and flex-grow: 1 on the element that should stretch.


demo

  • HTML, CSS
  • Includes: index.html and CSS file
Please check for future updates here or at my gitHub page.