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