如何使用Flexbox中的媒体查询控制每行的项目数？

如何使用Flexbox中的媒体查询控制每行的项目数？

我必须摆脱块周围的空白，因为很难将百分比宽度清楚地应用于具有空白的元素，但是您可以看到更改：

@mixin max-width($width) {    @media screen and (max-width: $width) {        @content;    }}.container {    position: relative;    display: flex;    flex-flow: row wrap;}.item {    background-color: tomato;    box-sizing: border-box;    padding: 20px;    outline: 2px solid blue;    flex: 1;}@include max-width(992px) {    .item {        flex-basis: 25%;        background-color: red;    }}@include max-width(640px) {    .item {        flex-basis: 50%;        background-color: green;    }}

这里的重要部分是：

• flex-flow: row wrap

  它允许flexbox出现在多行中（默认为

  nowrap

  ）

• flex-basis``width

  在这种情况下等于

• position: relative

  这使得宽度相对于容器而不是主体（这会弄乱舍入）