Question

我在使用flexbox遇到了一个奇怪的情况。

基本上我在flexbox容器中有4个图像，而在移动设备上看起来没问题（2x2网格/列）我无法想象如何从655px（媒体查询）到1290px做同样的事情。

我发现另一个问题Stackoverflow question与我的100％相似但由于某种原因代码不起作用。

这是我的代码：

<!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>&copy; 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;}
}

Answer 1

在Responsive.css中添加min-width: 40%;，如下所示

@media screen and (min-width: 655px) {
    .primary ul{display: flex;flex-flow:row wrap;}
    .primary li{ flex: 1 1 0; min-width: 40%; }
    .secondary li{flex: 1 1 0; min-width: 40%; }
}

如果您希望列表项显示在上面的单行中，那么应该为屏幕提供2x2网格＆gt; 655px宽，然后在min-width: 0%;语句下将.primary li添加到@media screen and (min-width: 1290px) 1290px。

Answer 2

对flex-basis速记规则中的flex值进行调整。

而不是：

@media screen and (min-width: 655px) {
    .primary li { flex: 1 1 0; }
}

试试这个：

@media screen and (min-width: 655px) {
    .primary li { flex: 1 1 calc(50% - 2.4%); }
}

在原始代码中，flex: 1 1 0告诉flex项目的宽度为0px。这由第三个值表示，表示flex-basis: 0。然后，四个弹性项目会在flex-grow: 1的同一行上尽可能多地展开，由flex规则中的第一个值表示。

在调整后的代码中，我们告诉每个弹性项目的宽度为50％（减去您在代码中其他地方应用的余量）。这会强制每行两个弹性项目。

如何使用Flexbox将4张图像分成2x2网格？

2 个答案: