web-dev-qa-db-ja.com

Flexboxでメディアクエリを使用して行ごとのアイテム数を制御する方法

だから、私は次のものを持っていると想像してくださいマークアップ

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

そして、次の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;
}

行ごとに表示するアイテムの数を制御できる仮想のnumberプロパティに代わる実際のFlexbox CSS代替手段はありますか？

widthにより、.itemsごとに無制限の.rowを収めることができるため、フロートのようなグリッドが便利でした。しかし、flexboxでは、さまざまな幅で.rowクラスなどの回避策を使用して、レイアウトとアイテムの数を制御する必要があります。私はこれまで幸運でしたが、そのようなアプローチでは失敗する特定のタイプのレイアウトがあります。

デモンストレーションするためのCodepenリンク

csssassflexboxmedia-queries
36
knitevision

パーセンテージ幅はマージンのある要素にきれいに適用するのが難しいため、ブロックの周囲のマージンを取り除く必要がありましたが、 http://codepen.io/anon/pen/jPeLYb？ editors = 11 ：

@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は、ボディではなくコンテナに相対的な幅を作成します（これにより丸めが台無しになります）

71
Gareth