Html 调整flexbox网格以适应大屏幕和小屏幕尺寸

我做了两个布局

第一个用于中大屏幕，最后一个用于最大宽度736px设备分辨率

（无移动适配）

，然后我可以合并，因为它也使用FlexBox

我是英雄！
我是英雄！
我是英雄！
我是英雄！
我是英雄！

使用flexbox可以高效地实现您想要的布局（大屏幕和小屏幕）

您的代码可以大大简化

html，正文{
背景：线性梯度（#ade3e8，#b4）无重复；
身高：100%；
}
身体{
字体系列：“Raleway”，无衬线；
字体大小：22px；
字号：600；
文本转换：大写；
颜色：#FFF；
}
d-flex{
显示器：flex；
柔性包装：包装；
文本对齐：居中；
}
.d-flex>div{
保证金：5px；
}
.英雄{
弹性：0计算（33.33%-10px）；
填充：30px0；
背景#7e58b7；
边界半径：3px；
}
.英雄：第一个孩子{
弹性基础：计算（66.66%-10px）；
}
@介质（最大宽度：736px）{
.英雄{
弹性基础：计算（50%-10px）；
}
.英雄：第一个孩子{
柔性生长：1；
}
}
* {
框大小：边框框；
}

我是英雄！
我是英雄！
我是英雄！
我是英雄！
我是英雄！

use order property因为这个问题是针对新主题的，但是，您是否可以检查一下，为什么较大的矩形相对于较小的正方形具有较小的img高度？这是因为您使用的是具有不同纵横比的不同图像。要解决此问题，请使用

宽度：100%

/

高度：100%

，而不是

最大宽度

/

最大高度

：

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