You can fix the width for the divs which are children of the flex-container like
.flex-container.size-chart>div {
border: 1px solid #138D75;
border-radius: 10px;
margin: 4px 4px;
width:20%;
}
and then try to center the image with margin:0 auto; like
.size-chart > div img{
display:block;
margin:0 auto;
}
Hope this solves the problem.
I’m making a website which has a ‘webshop’ and there I am displaying 20 different kinds of beers. The more I scroll down the page, the more funnel shaped it gets. I want my flexitems to be equally the same width and height accross the whole page. For example when I add a new p tag and type some more information in it it just shifts the img to the left and the text gets one large line.
I want all the flexitems to have the same width and height, not caring about the with of the images, is that possible?
/* 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%</p>
<p> € 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%</p>
<p> € 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%</p>
<p> € 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%</p>
<p> € 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%</p>
<p> € 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%</p>
<p> € 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%</p>
<p> €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%</p>
<p> € 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%</p>
<p> € 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%</p>
<p> € 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%</p>
<p> € 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%</p>
<p> €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%</p>
<p> € 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%</p>
<p> € 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%</p>
<p> € 1,75/fles</p>
<p>25cl</p>
</div>
</div>width: ...px
I added the width as a test indeed, but then it shifts all the images to the lift, and not to the center anymore.
Have you test with same
and make sure you set the width of the divs in