如何擺脫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中不需要的空間？

回答

相關問題