宽度相等的Flexbox项

Question

我正在制作一个网站，其中有一个‘网上商店’，在那里我展示了20种不同的啤酒。我向下滚动的页面越多，它的漏斗形状就越好。我希望我的flexitems在整个页面上具有相同的宽度和高度。例如，当我添加一个新的p标记并在其中输入更多信息时，它只是将img向左移动，文本就会变成一行。

​

我希望所有的flexitems都具有相同的宽度和高度，而不关心图像的大小，这可能吗？

​

/* CSS */

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.flex-container.size-chart>div {
  border: 1px solid #138D75;
  border-radius: 10px;
  margin: 4px 4px;
}

.flex-container>div {
  padding: 15px;
}

img {
  max-width: 350px;
  max-height: 300px;
}

h1,
div>p {
  color: #138D75;
  text-align: center;
}

<!-- HTML -->

<H1>Favorieten</H1>
<div class="flex-container size-chart">
  <div>
    <p>Duvel</p>
    <img src="images/Bieren/Duvel.png" alt="Duvel">
    <p>Brouwerij: Duvel Moortgat</p>
    <p>Alcoholpercentage: 8,50&#37;</p>
    <p> &euro; 2,50/fles</p>
    <p>33cl</p>
    </p>
  </div>
  <div>
    <p>Chouffe Soleil</p>
    <img src="images/Bieren/Chouffe.png" alt="Chouffe Soleil">
    <p>Brouwerij: Brasserie D'Achouffe</p>
    <p>Alcoholpercentage: 6&#37;</p>
    <p> &euro; 2,00/fles</p>
    <p>33cl</p>
  </div>
  <div>
    <p>Dilirium Tremens</p>
    <img src="images/Bieren/Delirium.png" alt="Delirium Tremens">
    <p>Brouwerij: Huyghe</p>
    <p>Alcoholpercentage: 8,5&#37;</p>
    <p> &euro; 1,60/fles</p>
    <p>25cl</p>
  </div>
  <div>
    <p>Orval</p>
    <img src="images/Bieren/Orval.png" alt="Orval">
    <p>Brouwerij: Abdij Notre-dame d' Orval</p>
    <p>Alcoholpercentage: 6,2&#37;</p>
    <p> &euro; 1,95/fles</p>
    <p>33cl</p>
  </div>
  <div>
    <p>Gulden Draak Brewmaster</p>
    <img src="images/Bieren/Gulden draak.png" alt="Gulden draak brewmaster">
    <p>Brouwerij: Van Steenberge</p>
    <p>Alcoholpercentage: 10,5&#37;</p>
    <p> &euro; 8,50/fles</p>
    <p>33cl</p>
  </div>
</div>

<H1>Witbier</H1>

<div class="flex-container size-chart">

  <div>
    <p>Adriaan</p>
    <img src="images/Bieren/Adriaan.png" alt="Adriaan">
    <p>Brouwerij: Jopenkerk</p>
    <p>Alcoholpercentage: 5&#37;</p>
    <p> &euro; 2,75/fles</p>
    <p>33cl</p>
  </div>
  <div>
    <p>Vedett</p>
    <img src="images/Bieren/VedettWit.png" alt="Vedett">
    <p>Brouwerij: Duvel Moortgat</p>
    <p>Alcoholpercentage: 4,7&#37;</p>
    <p> &euro;1,29/fles</p>
    <p>33cl</p>
  </div>
  <div>
    <p>Hoegaarden</p>
    <img src="images/Bieren/Hoegaarden.png" alt="Hoegaarden">
    <p>Brouwerij: Anheuser-Busch InBev.</p>
    <p>Alcoholpercentage: 4,9&#37;</p>
    <p> &euro; 1.90/fles</p>
    <p>25cl</p>
  </div>
  <div>
    <p>Hoegaarden</p>
    <img src="images/Bieren/Hoegaarden.png" alt="Hoegaarden">
    <p>Brouwerij: Anheuser-Busch InBev.</p>
    <p>Alcoholpercentage: 4,9&#37;</p>
    <p> &euro; 1.90/fles</p>
    <p>25cl</p>
  </div>
  <div>
    <p>Sint Bernardus</p>
    <img src="images/Bieren/StBernardus.jpg" alt="Sint Bernardus">
    <p>Brouwerij: Sint Bernardus</p>
    <p>Alcoholpercentage: 5,5&#37;</p>
    <p> &euro; 1,50/fles</p>
    <p>33cl</p>
  </div>
</div>

<H1>Fruitige bieren</H1>

<div class="flex-container size-chart">
  <div>
    <p>Kriek</p>
    <img src="images/Bieren/kriek.png" alt="Kriek">
    <p>Brouwerij: Haacht</p>
    <p>Alcoholpercentage: 3,5&#37;</p>
    <p> &euro; 1,25/fles</p>
    <p>25cl</p>
  </div>
  <div>
    <p>Kriek Boon</p>
    <img src="images/Bieren/KriekBoon.png" alt="Kriek boon">
    <p>Brouwerij: Boon</p>
    <p>Alcoholpercentage: 4&#37;</p>
    <p> &euro;3,39/fles</p>
    <p>38cl</p>
  </div>
  <div>
    <p>Lindemans Appel</p>
    <img src="images/Bieren/LindemansAppel.png" alt="LindemansAppel">
    <p>Brouwerij: Lindemans</p>
    <p>Alcoholpercentage: 3,5&#37;</p>
    <p> &euro; 1.75/fles</p>
    <p>25cl</p>
  </div>
  <div>
    <p>Hoegaarden Radler Kiwi</p>
    <img src="images/Bieren/RadlerKiwi.png" alt="RadlerKiwi">
    <p>Brouwerij: Hoegaarden</p>
    <p>Alcoholpercentage: 2&#37;</p>
    <p> &euro; 1,75/fles</p>
    <p>25cl</p>
  </div>
  <div>
    <p>Hoegaarden Radler Limoen</p>
    <img src="images/Bieren/RadlerLimoen.png" alt="RadlerLimoen">
    <p>Brouwerij: Hoegaarden</p>
    <p>Alcoholpercentage: 2&#37;</p>
    <p> &euro; 1,75/fles</p>
    <p>25cl</p>
  </div>
</div>

​

Answer 1

您可以固定flex-container的子项div的宽度，如下所示

.flex-container.size-chart>div {
    border: 1px solid #138D75;
    border-radius: 10px;
    margin: 4px 4px;
    width:20%;
}

然后尝试使用margin:0 auto;将图像居中，如

.size-chart > div img{
    display:block;
    margin:0 auto;
}

希望这能解决这个问题。