在两列弹性项目之间定位站点标题

Question

我尝试制作一个 2 列的弹性布局，其中我的内联列表应该根据这 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>

需要，但考虑到我们不知道我们有多少 li 项目

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/（调整屏幕尺寸以达到效果）

在两列弹性项目之间定位站点标题

Position site title between two columns of flex items

html

css

flexbox

two-columns