如何使用 Flexbox 将 4 个图像划分为 2x2 网格？
Posted
技术标签:
【中文标题】如何使用 Flexbox 将 4 个图像划分为 2x2 网格？【英文标题】：How can I divide 4 images into 2x2 grid using Flexbox? 【发布时间】：2016-06-30 23:30:33 【问题描述】：我在使用 flexbox 时遇到了一个奇怪的情况。
基本上我在 flexbox 容器中有 4 个图像，而在移动设备上看起来还不错（2x2 网格/列）我不知道如何从 655 像素（媒体查询）到 1290 像素进行同样的操作。
我发现另一个问题*** 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;
atext-decoration: none;
ullist-style: none;
bodyfont-family: 'Electrolize', sans-serif;font-size: 16px;
.containerdisplay: flex;flex-direction:column;
.primary uldisplay:flex;flex-flow:row wrap;
.primary liflex: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 imgwidth:100%;height: auto;
.secondarybackground-color:#1c1c1c;
.secondary uldisplay:flex;flex-flow:row wrap;
.secondary liflex:auto;width:200px;margin:2%;border:2px solid white;
.secondary imgwidth:100%;height:auto;
.secondary h1color:white;text-align: center;
.flex-itemwidth:50%;text-align: center;
.flex-navmargin: 0 auto;margin-bottom: 3%;
.flex-nav uldisplay: 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;
.headerdisplay: flex;margin: 0 auto;
.header imgwidth:100%; width: 200px;;height: auto;
footerbackground-color: black;padding:10%;
footer pcolor:white;text-align: center;font-size: 1.5em;
.socialdisplay: flex;flex-direction: row wrap;justify-content: center;
.social awidth:100%;
响应式.css
@media screen and (min-width: 655px)
.primary uldisplay: flex;flex-flow:row wrap;
.primary li flex: 1 1 0;
.secondary liflex: 1 1 0;
@media screen and (min-width: 1290px)
.containerdisplay: 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-navwidth:80%;
.flex-nav uldisplay: flex;margin:0 auto;;padding:0;list-style:none;
.flex-nav liflex:auto;text-align: center;display:flex;
.flex-nav aflex-basis: 100%;display: flex;align-items: center;
.flex-nav spandisplay: block;width:100%;
.fa-facebookflex:1;
.primary
align-self: center;
width:80%;
margin-bottom:1em;
.primary libackground-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 limargin:1.2%;
h1width: 100%; color:white;text-align: center;
imgmax-width: 100%; height: auto;
【问题讨论】：
【参考方案1】：像这样在 Responsive.css 中添加min-width: 40%;
@media screen and (min-width: 655px)
.primary uldisplay: flex;flex-flow:row wrap;
.primary li flex: 1 1 0; min-width: 40%;
.secondary liflex: 1 1 0; min-width: 40%;
如果您希望列表项显示在 1290 像素以上的单行中，则应该为 >655 像素宽的屏幕提供 2x2 网格，然后在 @media screen and (min-width: 1290px) 语句下将 min-width: 0%; 添加到 .primary li。
【讨论】：
感谢您的回复和帮助，它可以按我的意愿工作。我在 446px 和 639px 之间还有另一个小问题，图像表现不同。它们的行为是这样的，因为我将框架中的主要 li 和次要 li 从宽度：200px 减少到 140px + 177px，因此它们也可以适应 320px 分辨率，你知道我该如何解决这个问题吗？新的代码笔：Codepen【参考方案2】：调整flex 速记规则中的flex-basis 值。
而不是这个：
@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 规则中的第一个值表示。
在调整后的代码中，我们告诉每个 flex 项目的宽度为 50%（减去您在代码中其他地方应用的边距）。这会强制每行有两个弹性项目。
【讨论】：
感谢您的回复和解释；）他们很有帮助以上是关于如何使用 Flexbox 将 4 个图像划分为 2x2 网格？的主要内容，如果未能解决你的问题，请参考以下文章
如何将数组划分为段，然后使用python numpy执行段的子段？