調整大小屏幕尺寸的flexbox網格

Question

我做了兩個佈局。

第一個是針對中型&大屏幕，最後一個針對最大寬度爲736px的設備分辨率。

Here is vanilla implementation with flexbox（不含移動適配）

And here is with bootstrap，然後我就可以合併，因爲它是使用flexboxes也

<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

你想要的佈局（包括大，小屏幕）可以通過flexbox高效地實現。

您的代碼可以大大簡化。

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>