Question

我尝试制作一个2列的flex布局，其中我的内联列表应该在此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/（重新调整大小屏幕效果）

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

1 个答案: