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

我对html 5和css 3很新，但是我想用flexbox制作项目页面并遇到问题：
该网站在桌面模式下看起来不错，但是当它切换到移动视图和“flex -flow：column“项目之间的空间太多，如下图所示。
Desktop version
Smartphones
的问题只发生在铬浏览器（谷歌浏览器，维瓦尔第，铁，Opera）的火狐，IE和边缘工作做好。
我被允许发布图片，所以我只是把链接放在这里。
在那里你可以看到我的CSS代码。我希望有人能帮助我！如何摆脱Chromium Flexbox中不需要的空间？

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>

来源

2017-06-06 Timo Kallmeyer

正常关闭您的媒体查询您需要发布一个工作代码段，而不仅仅是CSS – LGSon

正如抬起头，你在指定flex显示时，可能不需要在Chrome（webkit）的供应商前缀中添加。该功能在webkit浏览器中默认支持，尽管IE可能存在一些不规范（这不会被前缀缓解）。保存一些字节！ – TCharb

@LGSon增加了HTML，我希望现在可以理解而且我删除了供应商前缀，谢谢 –

如果从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% */ 
}

您还需要通过增加其缺少结束支架}

来源

2017-06-07 14:59:15 LGSon

谢谢！这是它的解决方案！我现在很开心！ –

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

回答

相关问题