Fatal编程技术网
  • html/
  • Html 如何使用Flexbox将4幅图像划分为2x2网格？

Html 如何使用Flexbox将4幅图像划分为2x2网格？

html css responsive-design

Html 如何使用Flexbox将4幅图像划分为2x2网格？,html,css,responsive-design,flexbox,Html,Css,Responsive Design,Flexbox,我在使用flexbox时遇到了一个奇怪的情况 基本上，我在flexbox容器中有4个图像，而在移动设备上，它看起来还可以（2x2网格/列），我不知道如何从655px（媒体查询）到1290px执行相同的操作 我发现另一个问题与我的问题100%相似，但由于某种原因，代码不起作用 这是一个 这是我的代码： <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/framework

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

基本上，我在flexbox容器中有4个图像，而在移动设备上，它看起来还可以（2x2网格/列），我不知道如何从655px（媒体查询）到1290px执行相同的操作

我发现另一个问题与我的问题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>
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;}
}
对
flex
速记规则中的
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:11 0
告诉flex项以0px的宽度开始。这由第三个值表示，表示
flex-basis:0
。然后，这四个flex项在同一行上以
flex-grow:1
尽可能多地展开，由
flex
规则中的第一个值表示


在调整后的代码中，我们告诉每个flex项的宽度为50%（减去代码中其他地方应用的余量）。这迫使每行有两个弹性项。
添加
最小宽度：40%在Responsive.css中，如下所示


@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%; }
}



这将为大于655px宽的屏幕提供2x2网格，然后添加
最小宽度：0%@媒体屏幕下的code>到
.primary li
和（最小宽度：1290px）
语句。
感谢您的回复和解释；）他们很有帮助谢谢你的回应和帮助，我希望它能正常工作。我在446px和639px之间还有一个小问题，图像的行为不同。它们的行为是这样的，因为我将框架中的主li和次li的宽度从200px减少到140px+177px，这样它们也可以适应320px的分辨率，你知道我如何解决这个问题吗？用于此的新代码笔：

@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%; }
}