Position site title between two columns of flex items

Question

I try to make a 2 columns flex layout where my inline list should be splitted on function of screen width in this 2 columns and the site title centered between columns.

Is it possible to achieve the desired result using flex?

nav{
  width:100%;
  display:flex;
  flex-flow: column;
  text-align:center;
}

ul{
  display:inline-block;
  margin:0;
  padding:0;


}

ul > li {

  display:inline;
}

ul > li + li {
   margin-left:15px;
}

<nav>
  <h1><a href="#">Site Title</a></h1>
  <ul>
    <li>Menu1</li>
    <li>Menu2</li> 
    <li>Menu3</li>
    <li>Menu4</li>
    <li>Menu5</li>
    <li>Menu2</li> 
    <li>Menu3</li>
    <li>Menu4</li>
    <li>Menu5</li> 
  </ul>
</nav>

Desired, but taking on consideration that we don't know how many li items do we have

Menu1 Menu2 Menu3 .. --Site Title-- Menu_n Menu_n + 1

Answer 1

Yes, flexbox should work for this layout.

HTML (no changes)

CSS

nav {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

ul {
    flex: 1;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

li {
    flex: 1 1 75px;
    border: 1px solid #ccc;
    background-color: lightgreen;
    padding: 10px;
    margin: 5px;
    box-sizing: border-box;
}

@media screen and ( max-width: 500px ) {
    li { flex-basis: calc(100% - 10px - 2px); } /* width - margin - border */
}

DEMO: http://jsfiddle.net/LLv9hxnb/3/ (re-size screen smaller for effect )