在兩列彈性項目之間定位網站標題

Question

我嘗試製作一個2列彈性佈局，其中我的內聯列表應該在這兩列中的屏幕寬度函數和列之間的網站標題中分開。

使用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>

期望，但將採取的考慮，我們不知道有多少項目裏怎麼做，我們有

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

Answer 1

是，Flexbox的應此佈局工作。

HTML（無變化）

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/（對於效應重新大小的屏幕更小）