По какой причине flex-элементы не сжимаются?

247

22 марта 2018, 07:15

По какой причине flex-элементы могут не сжиматься? Есть .flex-container в котором 6 img, нужно что бы элементы не переходили на новый ряд и что бы размер картинок уменьшал по ходу уменьшения контейнера, что бы все влезали.

Answer 1

Картинки по умолчанию несжимаемые и распирают флекс-конейнер, наклав хвостом на ваши желания.

Вариант 1: прописать картинкам стиль width:calc(100% / 6). Но он плох тем, что а) если картинок станет меньше или больше, понадобится менять стиль и б) на высоту он не влияет, так что картинки будут искажаться при сжатии/расширении контейнера.

Вариант 2: вместо 6 картинок затолкать во флекс-контейнер 6 дивов, в которых будет по одной картинке. Добавляешь стиля и картинки будут вести себя адекватно:

<style>
    .flex-container {display:flex;}
    img {
        object-fit:scale-down;
        max-width:100%;
    }
</style>
<div class="flex-container">
<div><img src="https://pbs.twimg.com/profile_images/588093314718629890/VT2CvDKQ_400x400.jpg"></div>
<div><img src="https://pbs.twimg.com/profile_images/588093314718629890/VT2CvDKQ_400x400.jpg"></div>
<div><img src="https://pbs.twimg.com/profile_images/588093314718629890/VT2CvDKQ_400x400.jpg"></div>
<div><img src="https://pbs.twimg.com/profile_images/588093314718629890/VT2CvDKQ_400x400.jpg"></div>
<div><img src="https://pbs.twimg.com/profile_images/588093314718629890/VT2CvDKQ_400x400.jpg"></div>
<div><img src="https://pbs.twimg.com/profile_images/588093314718629890/VT2CvDKQ_400x400.jpg"></div>