大、小画面用フレックスボックスグリッドの調整

Question

2つのレイアウトを行いました。

最初のものは中程度のものです&大画面、最後は最大幅736pxのデバイス解像度です。

（モバイル適応なし）

Here is vanilla implementation with flexbox

And here is with bootstrapそれはあなたが（大・小の両方の画面）したいレイアウト

<div class="d-flex gutters"> 
    <div class="bigger-cell"> 
     <div class="hero"> 
      I'm Hero! 
     </div> 
    </div> 
    <div class="cell"> 
     <div class="hero"> 
      I'm Hero! 
     </div> 
    </div> 
</div> 

<div class="d-flex gutters"> 
    <div class="cell"> 
     <div class="hero"> 
      I'm Hero! 
     </div> 
    </div> 
    <div class="cell"> 
     <div class="hero"> 
      I'm Hero! 
     </div> 
    </div> 
    <div class="cell"> 
     <div class="hero"> 
      I'm Hero! 
     </div> 
    </div> 
</div> 

Answer 1

もflexboxesを使用しているので、私はその後、マージすることができますフレックスボックスで効率的に達成できます。

コードを大幅に簡略化することができます。

https://jsfiddle.net/kmsxpk3q/

html, body { 
 
    background: linear-gradient(#ade3e8, #b4b4b4) no-repeat; 
 
    height: 100%; 
 
} 
 

 
body { 
 
    font-family: 'Raleway', sans-serif; 
 
    font-size: 22px; 
 
    font-weight: 600; 
 
    text-transform: uppercase; 
 
    color: #FFF; 
 
} 
 

 
.d-flex { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    text-align: center; 
 
} 
 

 
.d-flex>div { 
 
    margin: 5px; 
 
} 
 

 
.hero { 
 
    flex: 0 0 calc(33.33% - 10px); 
 
    padding: 30px 0; 
 
    background: #7e58b7; 
 
    border-radius: 3px; 
 
} 
 

 
.hero:first-child { 
 
    flex-basis: calc(66.66% - 10px); 
 
} 
 

 
@media (max-width: 736px) { 
 
    .hero { 
 
    flex-basis: calc(50% - 10px); 
 
    } 
 
    .hero:first-child { 
 
    flex-grow: 1; 
 
    } 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
}

<div class="d-flex"> 
 
    <div class="hero">I'm Hero!</div> 
 
    <div class="hero">I'm Hero!</div> 
 
    <div class="hero">I'm Hero!</div> 
 
    <div class="hero">I'm Hero!</div> 
 
    <div class="hero">I'm Hero!</div> 
 
</div>