Likely something depends on browsers?

.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%; } }
  • flex-direction: row; - this is used by default and there is no point to specify it, flex-wrap: wrap; - it is not necessary if you do not use inline, align-content: stretch; - does not make sense, as justify-content is used - Yuri

1 answer 1

 .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%; } } }

or so

  .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%; } } } }
  • does not work. I have a chrome google 29.0 - Valery Anestiadi
  • tried to use flex with prefixes? Perhaps the old version of the browser is really over the top. display: box; is a version of 2009. display: flexbox; is a version of 2011. display: flex; is the actual version. - HamSter
  • I prefixed it before. the result has not changed - Valery Anestiadi
  • solved the problem, must be added! important - Valery Anestiadi
  • 2
    I do not advise to solve problems through important! - mJeevas