複数幅の列を持つフレックスボックスグリッド

Question

製品を表示するために使用される4列のフレックスボックスグリッドがあります。すべての製品の幅は25％ですが、たとえば1つの製品で1つの行に2つの製品を表示できるように、1つの製品の幅が75％になるとグリッドが壊れないようにする方法はありますか？

フレックスボックスを使用して75％のグリッド項目を優先させる方法はありますか？グリッドを自動的に調整/シフトして、現時点で破損していないことを確認しますか？

jsFiddle（一番下のコード）

https://jsfiddle.net/kdjkc15g/

これは私が達成しようとしているものです：

CSS

.grid-uniform { 
    display: -ms-flex; 
    display: -webkit-flex; 
    display: flex; 
    flex-wrap: wrap; 
    margin-left: -20px; 
} 

.grid__item { 
    width: 25%; 
    display: -ms-flex; 
    display: -webkit-flex; 
    display: flex; 
    padding-left: 20px; 
    position: relative; 
    margin-bottom: $gutter*2; 
} 

.grid__item.featured-product { 
    width: 75%; 
} 

HTML

<div class="flex-grid"> 
<div class="grid-uniform"> 
    <a href="#" class="product grid__item"> 
    <div class="flex-content"> 
     <div class="grid__image"> 
     <img src="http://via.placeholder.com/250x350"> 
     </div> 
     <div class="grid product-info"> 
     <p> 
     This is a title 
     </p> 
     </div> 
    </div> 
    </a> 
    ... 
</div> 
</div> 

Answer 1

編集これまであなたのCSS。今は完全に反応しています。

CSS

* {box-sizing: border-box;} 
.flex-grid { 
    overflow: hidden; 
    padding: 0; 
} 

.grid-uniform { 
    display: flex; display: -webkit-flex; 
    flex-wrap:wrap; -webkit-flex-wrap: wrap; 
} 

.grid__item { 
    flex-grow: 1; -webkit-flex-grow: 1; 
    flex-basis: 25%; 
} 

.grid__item.featured-product { 
    flex-basis: 50%; 
} 

.grid__image { 
    background:#f4f4f4; 
    padding-top:$gutter; 
    padding-bottom:$gutter; 
    overflow: hidden; 
} 

リンクfiddle

Answer 2

にレイアウトの種類を行うにはかなり簡単な方法は、CSSグリッドモジュールを介してです。しかし、あなたがFlexboxを求めてきたので、

フレックスボックスベースのグリッドは幅で調整する必要があります（正確にはwidthではなく、flex-basisです）。 flex-basisを使用すると、flexbox-childrenのサイズをより簡単にすることができます。したがって、それらにwidthを与えることは避けました。

ここで調整したのはcalc()であり、それぞれ.grid__itemから溝幅の(n-1)を差し引いたものです。

なぜ（n-1）回ですか？

.grid__itemにはそれぞれ左マージンが与えられており、崩壊しないようにしています。したがって、最後のセルを1行で割ります。

/* Box-sizing reset */ 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 

 
.flex-grid { 
 
    max-width: 1120px; 
 
    margin: 2em auto; 
 
} 
 

 
.grid-uniform { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    margin-left: -20px; 
 
} 
 

 
.grid__item { 
 
    display: flex; 
 
    /* Used `flex` instead of `width` */ 
 
    flex: 1 0 calc(25% - 60px); /* (4-1) * 20px = 60px 
 
    /* Used `margin` instead of `padding` */ 
 
    margin: 0 0 20px 20px; 
 
    position: relative; 
 
    /* Gave it a size in order to make it look "uniform" */ 
 
    max-height: 350px; 
 
} 
 

 
.grid__item.featured-product { 
 
    flex-basis: calc(75% - 60px); /* (4-1) * 20px = 60px */ 
 
} 
 

 
.flex-content { 
 
    /* Made the content take up the whole available width and hide bleed-outs, if any */ 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.grid__image img { 
 
    /* Made the dummy images look okay */ 
 
    width: 100%; 
 
    object-fit: cover; 
 
    object-position: center; 
 
}

<div class="flex-grid"> 
 
    <div class="grid-uniform"> 
 
    <a href="#" class="product grid__item"> 
 
     <div class="flex-content"> 
 
     <div class="grid__image"> 
 
      <img src="http://via.placeholder.com/250x350"> 
 
     </div> 
 
     <div class="grid product-info"> 
 
      <p> 
 
      This is a title 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </a> 
 
    <a href="#" class="product grid__item"> 
 
     <div class="flex-content"> 
 
     <div class="grid__image"> 
 
      <img src="http://via.placeholder.com/250x350"> 
 
     </div> 
 
     <div class="grid product-info"> 
 
      <p> 
 
      This is a title 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </a> 
 
    <a href="#" class="product grid__item"> 
 
     <div class="flex-content"> 
 
     <div class="grid__image"> 
 
      <img src="http://via.placeholder.com/250x350"> 
 
     </div> 
 
     <div class="grid product-info"> 
 
      <p> 
 
      This is a title 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </a> 
 
    <a href="#" class="product grid__item"> 
 
     <div class="flex-content"> 
 
     <div class="grid__image"> 
 
      <img src="http://via.placeholder.com/250x350"> 
 
     </div> 
 
     <div class="grid product-info"> 
 
      <p> 
 
      This is a title 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </a> 
 
    <a href="#" class="product grid__item"> 
 
     <div class="flex-content"> 
 
     <div class="grid__image"> 
 
      <img src="http://via.placeholder.com/250x350"> 
 
     </div> 
 
     <div class="grid product-info"> 
 
      <p> 
 
      This is a title 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </a> 
 
    <a href="#" class="product grid__item featured-product"> 
 
     <div class="flex-content"> 
 
     <div class="grid__image"> 
 
      <img src="http://via.placeholder.com/550x350"> 
 
     </div> 
 
     <div class="grid product-info"> 
 
      <p> 
 
      This is a title 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </a> 
 
    <a href="#" class="product grid__item"> 
 
     <div class="flex-content"> 
 
     <div class="grid__image"> 
 
      <img src="http://via.placeholder.com/250x350"> 
 
     </div> 
 
     <div class="grid product-info"> 
 
      <p> 
 
      This is a title 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </a> 
 
    <a href="#" class="product grid__item"> 
 
     <div class="flex-content"> 
 
     <div class="grid__image"> 
 
      <img src="http://via.placeholder.com/250x350"> 
 
     </div> 
 
     <div class="grid product-info"> 
 
      <p> 
 
      This is a title 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </a> 
 
    </div> 
 
</div>

私はそれが有用だった願っています。乾杯！