I started testing Flexbox using on an existing template from an older stackoverflow question
HTML
.flex-items {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
}
.kutu {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
<section >
<header >
</header>
<div >
<div >
<h2>Temsilci</h2>
<div>
<img src="/images/ben.png" alt="">
<h4>Umutcan <span >"ııııııııııııığ"</span> Adiguzel</h4>
</div>
<div>
<img src="/images/kaan.png" alt="">
<h4>Ahmet Kaan <span >"kargolar seffaf mi"</span> Aslan</h4>
</div>
</div>
<div >
<h2>Bas kole</h2>
<div>
<img src="" alt="">
<h4>Ismail Emre <span >"Emre"</span> Gunes</h4>
</div>
</div>
<div >
<h2>Avusturya Temsilcisi</h2>
<div>
<img src="" alt="">
<h4>Hayri Cem <span >"hayry"</span> Adiguzel</h4>
</div>
</div>
<div >
<h2>Avcilar Yonetim Birligi Uyesi</h2>
<div>
<img src="" alt="">
<h4>Mehmet Ali <span >"ali58"</span> Kuzu</h4>
</div>
<div>
<img src="" alt="">
<h4>Anil <span >"anil"</span> Akyil</h4>
</div>
</div>
<div >
<h2>Eskortlar Odasi Esbaskan Vekili</h2>
<div>
<img src="/images/burak.png" alt="">
<h4>Burak <span >"yarrak gurmesi ekmen"</span> Colakoglu</h4>
</div>
</div>
<div >
<h2>Lezbiyen Haklari Koruma Birligi Uyesi</h2>
<div>
<img src="" alt="">
<h4>Ugur <span >"bardo"</span> Yengil</h4>
</div>
<div>
<img src="/images/cenker.png" alt="">
<h4>Cenker <span >"ceko anılelifbarışsınoğulları31"</span> Goksu</h4>
</div>
<div>
<img src="/images/canemir.png" alt="">
<h4>Canemir <span >"Gay Emir"</span> Ozdemir</h4>
</div>
<div>
<img src="/images/denizbora.png" alt="">
<h4>Deniz Bora <span >"dbe"</span> Ekiz</h4>
</div>
<div>
<img src="/images/kutay.png" alt="">
<h4>Mehmet Kutay <span >"kutii"</span> Keklik</h4>
</div>
<div>
<img src="/images/gokdeniz.png" alt="">
<h4>gokdeniz <span >"anıllaelifevlensin"</span> Dincer</h4>
</div>
</div>
<div >
<h2>Kaymakam Kalem Muduru</h2>
<div>
<img src="/images/ilker.png" alt="">
<h4>Ilker <span >"aktif gay"</span> Tari</h4>
</div>
</div>
<div >
<h2>Muhtarlar</h2>
<div>
<img src="" alt="">
<h4>Muhammed Can <span >"s2m2m7"</span> Adiguzel</h4>`enter code here`
</div>
<div>
<img src="" alt="">
<h4>Metehan <span >"Its mother fucking ghost"</span> Adiguzel</h4>
</div>
<div>
<img src="" alt="">
<h4>Enes <span >"Suprise"</span> Adiguzel</h4>
</div>
</div>
</div>
</section>
CSS flexbox image size strangely changing I would be grateful if you could help
CodePudding user response:
I didn't understand, if you don't want that the size change, put a fixed width and height, for example, width: 50% height:50% in the images. This may occurs because each image has a different size. I would recomend also put a fix width in the h4 or in the div that contains both.
.flex-items {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
}
.kutu {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
}
img {
width: 20%;
height: 20%;}
.kutu div { width: 40%;}