Flexbox项目的宽度相等

Question

我正在制作一个带有“网上商店”的网站，在那儿我展示了20种不同的啤酒。我在页面上向下滚动的次数越多，漏斗形的形状就越多。我希望整个页面的弹性项目的宽度和高度均相同。例如，当我添加一个新的p标签并在其中输入更多信息时，它只是将img移到左侧，文本变成了一条大行。

我希望所有的弹性项目都具有相同的宽度和高度，而不关心图像的宽度，这有可能吗？

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>

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

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

希望这可以解决问题。