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

Posted 2023-03-06

【中文标题】如何使用 Flexbox 中的媒体查询控制每行的项目数？

【英文标题】：How to control number of items per row using media queries in Flexbox?

【发布时间】：2015-10-15 18:13:39

【问题描述】：

假设我有以下 标记

<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>

以及以下样式 (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;

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

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

Codepen link to demonstrate

【问题讨论】：

好吧，您仍然可以使用宽度来控制每行将获得多少项目——通过flex-basis ...

CSS 网格将是今天以直截了当的方式解决这个问题的东西：developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/…

【参考方案1】：

我不得不去掉块周围的边距，因为百分比宽度很难干净地应用于有边距的元素，但你可以在 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;
    

这里的重要部分是：

flex-flow: row wrap 允许弹性框出现在多行上（默认为nowrap）

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

position: relative 使宽度相对于容器而不是主体（这会搞砸四舍五入）

【讨论】：

btw 以像素为单位的边距适用于 flex。我添加了margin-right: 100px，它起作用了。没有像浮动布局那样的溢出。感谢您的回答，正是我需要的。完全忘记这个属性

一旦你全力以赴使用 flexbox - 你永远不会想到浮动，这真的是一个令人讨厌的 hack。 Bootstrap 的网格是基于浮点数的。如果你有现代浏览器支持，你可以使用纯 flexbox 来更轻松、更强大。有一个名为 sass-flex-mixins 的包可以填充 IE10。

@httpete Floats 不是“讨厌的黑客”，它们的工作方式与设想的完全一样。相反，这个问题的存在有助于说明什么是设计糟糕的标准 flexbox。

@mystrdat 浮动不用于布局，而是用于文本中的浮动元素。任何因为浮动而与奇怪的重叠元素作斗争的人都看到了这一点。

所以这是一种令人讨厌的 hack 还是一种定位元素的方式？你将不得不做出选择。我可以看到您可能的意思是，今天使用浮点数不是最佳选择，在大多数情况下我都同意，但没有奇怪或不稳定的行为。

【参考方案2】：

我找到了一个更好的解决方案，可以在不使用媒体查询的情况下限制不同设备中的一行中的列数：

html：

<div class="flex-container">
    <div class="item">
        <h3>ONE</h3>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque maxime odit ipsam, fugit pariatur quis eos
        maiores nostrum? Alias tempora voluptate veritatis omnis quae corporis vero excepturi in rem ipsam.
    </div>
    <div class="item">
        <h3>TWO</h3>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque maxime odit ipsam, fugit pariatur quis eos
        maiores nostrum? Alias tempora voluptate veritatis omnis quae corporis vero excepturi in rem ipsam.
    </div>
    <div class="item">
        <h3>THREE</h3>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque maxime odit ipsam, fugit pariatur quis eos
        maiores nostrum? Alias tempora voluptate veritatis omnis quae corporis vero excepturi in rem ipsam.
    </div>
    <div class="item">
        <h3>FOUR</h3>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque maxime odit ipsam, fugit pariatur quis eos
        maiores nostrum? Alias tempora voluptate veritatis omnis quae corporis vero excepturi in rem ipsam.
    </div>
</div>

CSS：

.flex-container 
        display: flex;
        flex-wrap: wrap;

.item 
        box-sizing: border-box;
        flex: 1 0 250px;
        margin: 1rem;
        padding: 1rem;
        border: 1px solid #000;
        border-radius: 5px;

Codepen 链接：https://codepen.io/bala285/pen/YzqpLod

来源：https://www.fourkitchens.com/blog/article/responsive-multi-column-lists-flexbox/

【讨论】：

在 Stack Overflow 上不鼓励仅使用代码的答案，因为它们没有解释它如何解决问题。请编辑您的答案以解释此代码的作用以及它如何回答问题，以便它对 OP 以及其他有类似问题的用户有用。

它有 4 列。然后 2 收缩它，然后 1。这并没有完成。