如何使用 Flexbox 中的媒体查询控制每行的项目数? [英] How to control number of items per row using media queries in Flexbox?

问题描述

假设我有以下标记

<div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div>

以及以下样式 (SASS)

@mixin max-width($width) {@media 屏幕和 (max-width: $width) {@内容;}}.容器 {显示:弹性；@include 最大宽度(992 像素){数量:4；//假设属性应该控制每行的数量}@include 最大宽度(640 像素){2号;//假设属性应该控制每行的数量}}.物品 {背景色:番茄；填充:20px；右边距:20px；弹性:1；}

是否有一个真正的 Flexbox CSS 替代我假设的 number 属性可以控制每行显示多少项目?

类似浮动的网格很方便，因为 width 可以为每个 .row 放置无限的 .items.但是对于 flexbox，我必须使用诸如许多 .row 类之类的变通方法来控制不同宽度的项目的布局和数量.到目前为止，我一直很幸运，但是某些类型的布局会因这种方法而失败.

Codepen 演示链接

解决方案

我不得不去掉块周围的边距，因为百分比宽度很难干净地应用于有边距的元素，但你可以在 http://codepen.io/anon/pen/jPeLYb?editors=110:

@mixin max-width($width) {@media 屏幕和 (max-width: $width) {@内容;}}.容器 {位置:相对；显示:弹性；flex-flow:行包装；}.物品 {背景色:番茄；box-sizing: 边框框；填充:20px；轮廓:2px 纯蓝色；弹性:1；}@include 最大宽度(992 像素){.物品 {弹性基础:25%；背景颜色:红色；}}@include 最大宽度(640 像素){.物品 {弹性基础:50%；背景颜色:绿色；}}

这里的重要部分是:

• flex-flow: row wrap 允许 flexbox 出现在多行上(默认为 nowrap)

• flex-basis 在这种情况下相当于 width

• position: relative 使宽度相对于容器，而不是主体(这会搞砸舍入)

So imagine I have the following Markup

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

And the following styles (SASS)

@mixin max-width($width) {
    @media screen and (max-width: $width) {
        @content;
    }
}

.container {
    display: flex;

    @include max-width(992px) {
        number: 4; //Hypothetical property that is supposed to control number per row
    }

    @include max-width(640px) {
        number: 2; //Hypothetical property that is supposed to control number per row
    }
}
.item {
    background-color: tomato;
    padding: 20px;
    margin-right: 20px;
    flex: 1;
}

Is there a real Flexbox CSS alternative to my hypothetical number property that can control how many items to show per row ?

The float-like grid was handy because you could fit unlimited .items per one .row because of the width. But with flexbox I have to use workarounds like numerous .row classes to control the layout and number of items at different width. I've been lucky so far, but there are certain type of layout which will fail with such an approach.

Codepen link to demonstrate

解决方案

I had to get rid of the margin around the blocks, because percentage widths are difficult to cleanly apply to elements with margins, but you can see the changes at http://codepen.io/anon/pen/jPeLYb?editors=110 :

@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;
    }
}

The important parts here are:

• flex-flow: row wrap which allows the flexbox to appear on multiple rows (the default is nowrap)

• flex-basis which is the equivalent of width in this case

• position: relative which makes the widths relative to the container, rather than the body (this would screw up the rounding)

这篇关于如何使用 Flexbox 中的媒体查询控制每行的项目数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！