Всем привет! Появилась задача: смещать элементы при уменьшении окна браузера. То есть, у меня есть блок новостей, всего одна строка, в строке 4 новости, организованный на flex модели. И при уменьшении окна браузера мне нужно, чтобы новости становились в сетку 2x2, если ширины будет не хватать, то в сетку 1x4.
Смотрю на данный момент на механизм flex-box'а.
Придумал решение на @media screen and (max-width)
, но есть подозрение, что это будет не слишком элегантно и красиво, нежели в случае с flex-box моделью.
То, что у меня сейчас есть на руках, на flex'е:
news {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
new {
width: 80px;
height: 20px;
background: teal;
text-align: center;
}
<news>
<new>Новость 1</new>
<new>Новость 2</new>
<new>Новость 3</new>
<new>Новость 4</new>
</news>
@media screen
. Если решения нету, то буду использовать его, что поделать :-D