Question

我对html 5和css 3很新，但是我想用flexbox创建项目页面并遇到问题：
该网站在桌面模式下看起来不错，但是当它切换到移动视图和＆＃34; flex-flow：列＆＃34;如下图所示，物品之间的空间太大。
Desktop version
Smartphones
问题只发生在基于铬的浏览器（谷歌浏览器，维瓦尔第，铁，歌剧），Firefox，IE和Edge运作良好我还不允许发布图片所以我只是把链接放在这里在那里你可以看到我的CSS代码。我希望有些人可以帮助我！

body {
display: flex;
flex-flow: row wrap;
margin: 0 auto;
background-color: f4f4f4;
font-family: Hind, Sans-serif;
justify-content: space-between;
}
header,
nav,
nav a,
article,
aside,
footer {
border-radius: 0px 0,5em 0em;
padding: 15px;
margin: 0.5em;
flex: 1 100%;
}
header {
background: var(--color-primary);
display: flex;
flex-flow: column;
align-items: center;
}
header * {
flex: 1 1 0%;
}
header nav {
flex: 1 1 100%;
}
nav,
nav ul,
nav li {
margin: 0;
padding: 0;
border: none;
}
nav ul {
display: flex;
flex-direction: column;
}
nav li {
list-style-type: none;
margin: 1.3em 0;
flex: 1 1 100%;
}
nav a {
display: inline-block;
width: 95%;
/*background: #fffbf0;*/
border-bottom: solid 0.1em;
border-color: var(--color-primary);
margin: 0;
font-weight: bold;
text-decoration: none;
text-align: center;
color: var(--color-secondary-2);
}
@media all and (min-width: 35em) {
header {
flex-flow: row wrap;
}
nav ul {
flex-direction: row;
}
nav li {
margin: 0 0.5em;
flex: 1 1 0%;
}

现在为基本的HTML部分：

<header>      
 <nav>
  <ul>
   <li><a href="item1.html">item1</a></li>
   <li><a href="item2.html">item2</a></li>
   <li><a href="item3.html">item3</a></li>
   <li><a href="item4.html">item4</a></li>
   <li><a href="item5.html">item5</a></li>
   <li><a href="item6.html">item6</a></li>
   <li><a href="item7.html">item7</a></li>
  </ul>
 </nav>
</header>

Answer 1

如果您从align-items: center;规则

中删除header，则会有效

header {
  background: var(--color-primary);
  display: flex;
  flex-flow: column;
  /*  align-items: center;              commented out */
}

并在flex: 1 1 0%;规则中更改为flex: 1 1 100%;而不是nav li

nav li {
  list-style-type: none;
  margin: 1.3em 0;
  flex: 1 1 0%;               /*  change basis to 0%  */
}

您还需要通过添加缺少的结束括号}

来正确关闭媒体查询

如何摆脱Chromium Flexbox中不需要的空间？

1 个答案: