我在flex容器中有4个项目。我想使它们中的4个具有相同的宽度和高度，但始终将它们放在2个不同的行中（因此是2 X 2的网格）。
由于子项位于不同的伸缩容器中，因此他们不服从，flex-grow: 1;即使同一行的子项也不遵守规则。如果我将它们放在相同的容器中，它们会将它们放在同一行中，那么我需要2 X 2的网格。
您可以在此处找到具有相同代码的codepen：https ://codepen.io/mongolhippie/pen/yLYQbVd?editors=1100
.tile {
display: flex;
flex-direction: column;
border: 2px solid #A97C50;
border-radius: 20px;
padding: 20px;
margin: 25px;
/* THESE 3 OPTIONS TO CONTROLL HAVING THE SAME SPACE FOR EVERY TILE */
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
flex: 1;
}
.tile p {
font-size: min(calc( 1.125vw + 1.2rem ), 3.9rem);
}
.flex-center{
display: flex !important;
justify-content: center !important;
align-items: center;
}
.manual-link {
text-decoration: none !important;
color: var(--brown-dark);
}
.manual-link:hover {
text-decoration: none !important;
color: var(--brown-dark);
}
.icon-and-title{
display: flex;
align-items: center;
}
.icon-and-title p{
font-size: min(calc( 1.125vw + .9rem ), 3.9rem);
}
.icon-and-title img{
max-width: 100%;
height: auto;
transition: all .3s;
max-height: 80px;
margin-right: 20px;
margin-bottom: 10px;
} <div class="flex-center">
<a class="manual-link" href="/manuals/manual-it.pdf">
<div class="tile">
<div class="icon-and-title">
<img src="https://i.pinimg.com/originals/06/bc/e8/06bce81285badba0c3becd273ca67f95.png" alt="">
<p>ADMIN</p>
</div>
<div class="links-manuals">
<p>For the administrator of the app</p>
</div>
</div>
</a>
<a class="manual-link" href="/manuals/manual-developers.pdf">
<div class="tile">
<div class="icon-and-title">
<img src="https://i.pinimg.com/originals/06/bc/e8/06bce81285badba0c3becd273ca67f95.png" alt="">
<p>DEVELOPERS</p>
</div>
<div class="links-manuals">
<p>To upgrade the Code</p>
</div>
</div>
</a>
</div>
<div class="flex-center">
<a class="manual-link" href="/manuals/manual-design.pdf">
<div class="tile">
<div class="icon-and-title">
<img src="https://i.pinimg.com/originals/06/bc/e8/06bce81285badba0c3becd273ca67f95.png" alt="">
<p>DESIGNERS</p>
</div>
<div class="links-manuals">
<p>Style guide</p>
</div>
</div>
</a>
<a class="manual-link" href="/manuals/ngo.pdf">
<div class="tile">
<div class="icon-and-title">
<img src="https://i.pinimg.com/originals/06/bc/e8/06bce81285badba0c3becd273ca67f95.png" alt="">
<p>NGOs</p>
</div>
<div class="links-manuals">
<p>The project</p>
</div>
</div>
</a>
</div>将它们以相同的宽度和高度放在2 X 2的位置中的秘密是什么？
非常感谢！
只需从Flexbox移至CSS GRID。
因此，像这样更改CSS：
.flex-center{
display: grid;
grid-template-columns: 1fr 1fr;
}
由于您要在2个不同的行中处理布局，因此我们将使用grid-template-columns。
该fr单元告诉网格必须具有相同宽度的“像元”。
最好将类重命名为.flex-center其他名称，因为您将使用CSS GRID。
这是更新的工作Codepen
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句