内含图像的自动列宽

Question

我目前正在尝试实现以下类型的网格/列，但我无法实现。有些图像的宽度比其他图像大，因此需要占用更多的空间。

我将有大约30ish的图像，我将循环通过，所以我不能只为每一列设置宽度。我不知道如何解决这个问题。

我有以下内容，我希望每行有3个，它给了我一些不错的结果，但并不完全正确。

https://codepen.io/BlooDyBG/pen/OJVxYEj

  <div class="flex-container">
  <div class="flex-item">
  <a href="https://ibb.co/CBBLGnp"><img src="https://i.ibb.co/WnnCJcN/Image-2.png" alt="Image-2" 
 border="0"></a>
 </div>
<div class="flex-item">
  <a href="https://imgbb.com/"><img src="https://i.ibb.co/HqdrqQB/Image-3.png" alt="Image-3" border="0"> 
  </a>
    </div>

   <div class="flex-item">
 <a href="https://ibb.co/3d20nnC"><img src="https://i.ibb.co/r0YZVVw/Image-4.png" alt="Image-4" border="0"></a>
 </div>

      <div class="flex-item">
     <a href="https://ibb.co/QHJ4gTP"><img src="https://i.ibb.co/7pSqfZn/Image-5.png" alt="Image-5" border="0"></a>
            </div>

     <div class="flex-item">
    <a href="https://ibb.co/7p6LHFy"><img src="https://i.ibb.co/R6Vd1WH/Image-6.png" alt="Image-6" border="0"></a>
    </div>

  <div class="flex-item">
  <a href="https://imgbb.com/"><img src="https://i.ibb.co/HqdrqQB/Image-3.png" alt="Image-3" border="0"></a>
  </div>

   </div>

CSS

.flex-container {
display : flex;
flex-wrap: wrap;
 padding : 20px;
}

.flex-item {
 flex: 1 1 auto;
 padding : 20px;
 }

 img {
  width : 100%;
  height : 100%;
 }

​

​

Answer 1

flex速记的第三部分是flex-basis，它通知浏览器如何处理灵活项目的大小。在本例中，您将其设置为auto，这将指示浏览器使用内容的宽度来确定大小。

相反，您应该使用诸如flex: 1 1 30%之类的东西来确保所有项的大小一致。

或者，您可以使用CSS Grid创建此类型的布局。它看起来像这样：

.flex-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}