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

Question

[Павел]

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


Проблема в том, что, допустим на 1080px два кружка должны перескочить на второй ряд, и более до 320px рядность меняться не должна, и в таком случае, допустим на 880px мы имеем такую картину:

Когда изображения в верхнем ряду начинают сжиматься, а в нижнем имеют полную ширину - что не есть ок, т.к. они должны быть одинаковые.

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

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

Заранее спасибо за советы :)

Comments

[lie2]

Нельзя просто зафиксировать размер?

[Павел]

lie2, Размер экрана?
Ведь если зафиксировать размер шариков - они не влезут в экран...или блок перескочит не так, как мне нужно...

Answer 1

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

Comments

[Павел]

Бутсрапа нет, но тем не менее мне нужно оставить 3 шарика сверху, и два снизу от, допустим 700 пикселей, до 320, причем два нижних шарика центрируются. Ваш пример тут не будет работать, и не вижу как бутсрап тут вообще может помочь, учитывая центрирования второго ряда шариков...может есть идея?

Или все таки просто мерить ширину верхнего шарика и js'ом ставить ширину нижнему...

[Sanikyer]

Я, конечно, не в тему, но разве программирование - это "копипаст"? Здесь часто раздают советы, чтобы просто позаимствовали уже готовый код.

Answer 2

[hzzzzl]

смотря что это за шарики :)
если просто синие шарики, то не особо сложно



если блоки с динамичным контентом неопределенной длины, то .......

Comments

[Павел]

Да, я не уточнил в посте - но второй ряд центрируется. И размер у "шариков" не так отлично влазиет в контейнер - как у Вас :)
То есть на 900px первый ряд уже начинает сжиматься - и он должен сжиматься, т.к. на 320px шарики должны быть около 80px ( а не 160 - как были изначально) - как в первом, так и во втором ряду...

В общем вариант только с js похоже...

Answer 3

[forspamonly2]

кажется вам тут проще без флексов обойтись. задать размеры шариков в процентах от ширины.

Answer 4

[Павел]

В общем, без пару строчек 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);
}