为大屏幕和小屏幕调整 flexbox 网格

Question

我做了两个布局。

第一个用于中大屏幕，最后一个用于最大宽度 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

您想要的布局（大屏幕和小屏幕）都可以使用 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>