0

Всем привет! Появилась задача: смещать элементы при уменьшении окна браузера. То есть, у меня есть блок новостей, всего одна строка, в строке 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>

6
  • flex-wrap: wrap; - В одной строке может быть много блоков. Переносятся они или нет определяет свойство flex-wrap. 26 ноя 2017 в 17:54
  • @Даниил примерно то, что нужно, спасибо! Но получается сетка 3x2. У меня это выглядит немного странно, потому что в первой строке 3 новости, а во второй одна :) 26 ноя 2017 в 17:56
  • можно сделать центровку, чтобы последний блок отоброжался по центру 26 ноя 2017 в 17:57
  • @Даниил да, понимаю, но это всё равно будет выглядеть не очень, согласитесь? Лучше в данном случае сделать сетку 2x2, чтобы всё было красиво и лаконично. Решение-то у меня уже есть, но оно на @media screen. Если решения нету, то буду использовать его, что поделать :-D 26 ноя 2017 в 18:01
  • @MarkKhromov ну если вдруг кто-то вам сказал что на флексах прям адаптивно-адаптивно будет совсем без медиа-запросов – вас обманули.
    – user271410
    26 ноя 2017 в 19:10

1 ответ 1

2

Не плохая статья по FLEX

В одной строке может быть много блоков. Переносятся они или нет определяет свойство flex-wrap.

Возможные значения:

nowrap — блоки не переносятся (значение по умолчанию);

wrap — блоки переносятся;

wrap-reverse — блоки переносятся и располагаются в обратном порядке.

1
  • Спасибо за статью, хорошая! Добавил в избранное 26 ноя 2017 в 18:00

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.