2
我用flexbox遇到了一個奇怪的情況。如何使用Flexbox將4幅圖像分割爲2x2網格？
基本上我有一個flexbox容器內的4個圖像，雖然在移動它看起來好（2x2網格/列）我無法計算如何從655px（媒體查詢）如何做到1290px。
我發現了另一個問題Stackoverflow question與我的100％相似，但由於某些原因代碼不起作用。
這裏是一個Codepen
這是我的代碼：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/framework.css">
<link rel="stylesheet" href="css/responsive.css">
<link href='https://fonts.googleapis.com/css?family=Electroliz0' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/custom.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>NK Electrical LTD</title>
</head>
<body>
<div class="container">
<div class="header">
<img src="img/nklogo.png">
</div>
<nav class="flex-nav">
<ul>
<li><a href="£"><span>Home</span></a></li>
<li><a href="£"><span>Electrical Installations</span></a></li>
<li><a href="£"><span>Lighting</span></a></li>
<li><a href="£"><span>Home Appliances</span></a></li>
<li><a href="£"><span>Contact</span></a></li>
<li><a href="£"><span>About</span></a></li>
<li class="social">
<a href="https://www.facebook.com/nkelectricalltd/?fref=ts"target="_blank"><img src="img/fbicon.png"></a>
</li>
</ul>
</nav>
<div class="primary">
<ul>
<li class="flex-item"><img src="img/electrical.png"><p>Electrical Installations</p></li>
<li class="flex-item"><img src="img/lighting.png"><p>Lighting</p></li>
<li class="flex-item"><img src="img/homeappliances1.png"><p>Electrical Appliances</p></li>
<li class="flex-item"><img src="img/homeappliances2.png"><p>Kitchen Appliances</p></li>
</ul>
</div>
<div class="secondary">
<h1>Our latest products</h1>
<ul>
<li class="flex-item"><img src="img/1.jpg"></li>
<li class="flex-item"><img src="img/2.jpg"></li>
<li class="flex-item"><img src="img/3.jpg"></li>
<li class="flex-item"><img src="img/4.jpg"></li>
</ul>
</div>
<footer><p>© NK ELECTRICAL LTD 2016</p></footer>
</div>
</body>
</html>
框架/ main.css的
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a{text-decoration: none;}
ul{list-style: none;}
body{font-family: 'Electrolize', sans-serif;font-size: 16px;}
.container{display: flex;flex-direction:column;}
.primary ul{display:flex;flex-flow:row wrap;}
.primary li{flex:auto;width:200px;margin:1%;padding:2%;background-color: #1c1c1c;color: #bdc3c7;}
.primary p{
padding: 20px;
background-color: #483636;
color: #bdc3c7;
text-align:center;}
.primary img{width:100%;height: auto;}
.secondary{background-color:#1c1c1c;}
.secondary ul{display:flex;flex-flow:row wrap;}
.secondary li{flex:auto;width:200px;margin:2%;border:2px solid white;}
.secondary img{width:100%;height:auto;}
.secondary h1{color:white;text-align: center;}
.flex-item{width:50%;text-align: center;}
.flex-nav{margin: 0 auto;margin-bottom: 3%;}
.flex-nav ul{display: flex;flex-wrap: wrap;}
.flex-nav a{
display: block;
color: #797e83;
font-size: 1.125em;
font-weight: 300;
text-align: center;
padding: .4em;
border-bottom: 1px solid #ebecec;}
.flex-nav li{
text-align: center;
margin: 0 auto;
flex-basis:500px;
}
.flex-nav a:hover {
color: #0b0b0b;
border-bottom-color: #52bab3;
}
.header{display: flex;margin: 0 auto;}
.header img{width:100%; width: 200px;;height: auto;}
footer{background-color: black;padding:10%;}
footer p{color:white;text-align: center;font-size: 1.5em;}
.social{display: flex;flex-direction: row wrap;justify-content: center;}
.social a{width:100%;}
Responsive.css
@media screen and (min-width: 655px) {
.primary ul{display: flex;flex-flow:row wrap;}
.primary li{ flex: 1 1 0;}
.secondary li{flex: 1 1 0;}
}
@media screen and (min-width: 1290px){
.container{display: flex;flex-flow: column wrap;max-width:1290px;margin: 0 auto;}
.flex-item {
border: 1px solid white;
padding: 5px;
width: 200px;
margin-top: 10px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
.flex-nav{width:80%;}
.flex-nav ul{display: flex;margin:0 auto;;padding:0;list-style:none;}
.flex-nav li{flex:auto;text-align: center;display:flex;}
.flex-nav a{flex-basis: 100%;display: flex;align-items: center;}
.flex-nav span{display: block;width:100%;}
.fa-facebook{flex:1;}
.primary {
align-self: center;
width:80%;
margin-bottom:1em;
}
.primary li{background-color: #1c1c1c;
color: #bdc3c7;font-size: 1.5em;margin:1.2%;}
.primary p{
padding: 6%;
background-color: #483636;
color: #bdc3c7;
text-align:center;
}
.secondary{
align-self:center;
width:80%;
background-color:#1c1c1c;
margin-bottom:1em;
}
.secondary li{margin:1.2%;}
h1{width: 100%; color:white;text-align: center;}
img{max-width: 100%; height: auto;}
}
感謝您的答覆和幫助，它的工作原理是我想要的。我有另一個446px 639px之間的小問題，其中圖像的行爲不同。他們的行爲就是這樣，因爲我把框架中的主要li和次要li從寬度：200px減少到140px + 177px，因此它們也可以適合320px分辨率，您有任何想法我可以解決這個問題嗎？新的codepen：[Codepen]（http://codepen.io/anon/pen/ZWBRxK） –