左右可変・中央固定の3カラム レイアウト

こんなかんじでいけます。
ナビゲーションのデザインなどに使えるかと思います。

DEMOはこちら - jsfiddle

HTML

<div class="bg">
  <div class="wrapper">
    <div class="inner">
      <ul>
        <li>menu</li>
        <li>menu</li>
        <li>menu</li>
      </ul>
    </div>
  </div>
</div>

SCSS

.bg {
  position: relative;
  width: 100%;
  height: 200px;
  background: url(http://p-hold.com/400/01553b) no-repeat;
  background-size: cover;
}

.wrapper {
  position: relative;
  display: table;
  width: 100%;
  .inner {
    display: table-row;
    &:before,
    &:after {
      content: "\0020";
      display: table-cell;
      width: auto;
      background-color: #999999;
    }
    > ul {
      display: table-cell;
      width: 300px;
      li {
        display: inline-block;
        float: left;
        box-sizing: border-box;
        width: 100px;
        padding: 20px 0;
        text-align: center;
        background-color: #ccc;
        &:nth-child(2n) {
          background: transparent;
        }
      }
    }
  }
}

もっといい方法があったら教えて下さい 😀
ありがとうございました🌟