Question

想象一下，我有以下标记

<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属性，可以控制每行显示多少项？

类似浮动的网格非常方便，因为.items可以使每.row个width无限制.row。但是对于flexbox，我必须使用像许多import os.path # Static Routes @get('/<filename>') def serve_static_file(filename): ext = os.path.splitext(filename)[1][1:] ext_map = {'image':['png','gif','jpg','ico'],'js':['js']} sub_folder = next((k for k, v in ext_map.items() if ext in v),'') return static_file(filename, root='static/'+sub_folder)类这样的变通方法来控制不同宽度的项目布局和数量。到目前为止，我一直很幸运，但是有某种类型的布局会因为这种方法而失败。

Codepen link to demonstrate

Answer 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允许flexbox显示在多行上（默认为nowrap）
flex-basis在这种情况下相当于width
position: relative使宽度相对于容器而不是主体（这会搞砸圆角）

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

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

2 个答案: