2

Наверно что-то зависит от браузеров?

.articles-list {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: stretch;
    .item {
        margin-top: 0;
        margin-right: 5px;
        margin-bottom: 20px;
        margin-left: 5px;
        align-self: flex-start;
        flex: 1 0 30%;
    }
}

@media screen and (max-width: 991px) {    
    .item {
        flex: 1 0 48%;
    }
}
1
  • flex-direction: row; - это используется по-умолчанию и указывать его нету смысла, flex-wrap: wrap; - это не нужно, если вы не используете inline, align-content: stretch; - не имеет смысла, так как используется justify-content
    – Юрий
    Commented 12 дек. 2016 в 12:02

1 ответ 1

0
.articles-list {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        align-content: stretch;
        .item {
            margin-top: 0;
            margin-right: 5px;
            margin-bottom: 20px;
            margin-left: 5px;
            align-self: flex-start;
            flex: 1 0 30%;
        }
}

@media screen and(max-width: 997px) { 
  .articles-list {
    .item {
        flex: 1 0 48%;
    }
  }
}

или так

 .articles-list {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        align-content: stretch;
        .item {
            margin-top: 0;
            margin-right: 5px;
            margin-bottom: 20px;
            margin-left: 5px;
            align-self: flex-start;
            flex: 1 0 30%;

          @media screen and(max-width: 997px) {   
              & {
                  flex: 1 0 48%;
              }
          }
        }
}
11
  • не работает. у меня chrome google 29.0 Commented 21 окт. 2016 в 10:43
  • с префиксами пробовали использовать флекс? Возможно и впрямь через чур старая версия браузера. display: box; is a version of 2009. display: flexbox; is a version of 2011. display: flex; is the actual version.
    – SVE
    Commented 21 окт. 2016 в 10:48
  • я так раньше сделал префикс. результат ничего не изменилось Commented 21 окт. 2016 в 10:52
  • решил проблему, необходимо добавить !important Commented 21 окт. 2016 в 11:10
  • 2
    не советую решать проблемы через !important
    – user31906
    Commented 21 окт. 2016 в 11:38

Ваш ответ

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

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