Как правильно сверстать такой ряд?

Здравствуйте. Прошу совета, не могу сообразить, как лучше всего сверстать вот такой ряд.
5ec76994a27f8381984548.jpeg

Проблема в том, что, допустим на 1080px два кружка должны перескочить на второй ряд, и более до 320px рядность меняться не должна, и в таком случае, допустим на 880px мы имеем такую картину:
5ec769f0851ab211734934.jpeg
Когда изображения в верхнем ряду начинают сжиматься, а в нижнем имеют полную ширину - что не есть ок, т.к. они должны быть одинаковые.

На ум приходит только измерение js изображения из верхнего ряда, и установки его ширины нижнему.
Есть вариант осуществить ТЗ без применения JS?

Сейчас у меня это два flex контейнера - один для трех шариков, и второй для двух, на 1080 встают в ширину 100%, и вот что имеем - то имеем...

Заранее спасибо за советы :)
  • Вопрос задан
  • 97 просмотров
Пригласить эксперта
Ответы на вопрос 4
Berkutman
@Berkutman
Если используете бутсрап , то почитайте статью Grid system.
Ну все же за Вас придумали, зачем изобретать велосипед ?

<div class="conatainer">
  </div class="row">
     <div class="col">
     Первый элемент
   </div>
    <div class="col">
    Второй  и тд
   </div>
 </div>
</div>


.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 1200px)
.container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1140px;
}
@media (min-width: 992px)
.container, .container-lg, .container-md, .container-sm {
    max-width: 960px;
}
@media (min-width: 768px)
.container, .container-md, .container-sm {
    max-width: 720px;
}
@media (min-width: 576px)
.container, .container-sm {
    max-width: 540px;
}
@media (min-width: 1200px)
.container {
    max-width: 1140px;
}
@media (min-width: 992px)
.container {
    max-width: 960px;
}
@media (min-width: 768px)
.container {
    max-width: 720px;
}
@media (min-width: 576px)
.container {
    max-width: 540px;
}

.col {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
Ответ написан
hzzzzl
@hzzzzl
смотря что это за шарики :)
если просто синие шарики, то не особо сложно



если блоки с динамичным контентом неопределенной длины, то .......
Ответ написан
@forspamonly2
кажется вам тут проще без флексов обойтись. задать размеры шариков в процентах от ширины.
Ответ написан
@Asokr Автор вопроса
В общем, без пару строчек JS не обошлось...
$(document).ready(function() {
    setBallsSize();
});

$(window).resize(function() {
    setBallsSize();
})

function setBallsSize() {
    setTimeout(function () {
        var ballWidth = $('.ball_row1 .ball_image').width();
        $('.ball_row2 img').each(function() {        
            $(this).css('width', ballWidth);
        });        
    }, 200);
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы