【发布时间】：2016-06-30 23:30:33
【问题描述】：
我在使用 flexbox 时遇到了一个奇怪的情况。
基本上我在 flexbox 容器中有 4 个图像，而在移动设备上看起来还不错（2x2 网格/列）我不知道如何从 655 像素（媒体查询）到 1290 像素进行同样的操作。
我发现另一个问题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%;}
响应式.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;}
}
【问题讨论】：
标签： html css responsive-design flexbox