如何使用flexbox实现复杂、响应性强的HTML布局？

我研究了Flexbox，以获得如下所示的响应性布局。不幸的是，我还没有弄清楚如何实现像图1这样的桌面布局，在小于414像素的视口中，它会重新排列为图2

图1（桌面视口）

图2（移动视口） （缩放版）

点击此处查看

到目前为止，我的代码是：

.flexbox{
显示：-网络工具包盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
柔性包装：包装；
宽度：100%；
保证金：0；
弯曲方向：行；
}
.content-flexbox.one{
弹性基础：计算（66%-1勒姆）；
顺序：2；
}
.content-flexbox.2{
弹性基础：计算（30%-1勒姆）；
顺序：1；
}
.content-flexbox.3{
顺序：3；
}
.content-flexbox.4{
顺序：4；
}
.内容flexbox{
保证金：1rem；
-webkit-box-flex:1；
-webkit-flex:1；
-ms-flex:1；
弹性：1；
}
@仅介质屏幕和（最大宽度：959px）{
.flexbox{
-弯曲方向：立柱；
垫面：1毫米；
}
.内容flexbox{
保证金：1rem；
弹性：1；
弹性基准：100%；
}
.content-flexbox.one{
弹性基准：100%；
顺序：1；
}
.content-flexbox.2{
弹性基准：100%；
顺序：2；
}
}

乱数假文
多洛·希特·阿梅特
同侧阴唇
同侧阴唇
同侧阴唇

我发现您可以使用宽度为%的液体样式页面，制作两个带有浮子的容器。如果选择移动视口，请使用媒体查询来声明断点

我认为这对于纯css来说是不可能的，但是您可以使用一些js并在调整大小时使用

wrapAll（）

和

unwrap（）

更改html结构。当窗口小于414px时，您还需要使用

媒体查询来更改顺序和一些css


$（窗口）.on（“调整大小”，函数（）{
var windowW=$（window.width（）；
如果（窗口W<414）{
如果（$（'.right，right-inner'）.length）$（'.two，.four'）.unwrap（）；
如果（！$（'.top'）.length）$（'.one、.two、.three'）.wrapAll（''）；
}否则{
如果（$（'.top'）.length）$（'.one、.two、.three'）.unwrap（）；
如果（！$（'.右，.右内'）.长度）{
$（'.3，.4'）.wrapAll（''）；
$（'.two，.右内'）.wrapAll（''）；
}
}
}).resize（）
*{
框大小：边框框；
保证金：0；
填充：0；
}
身体，
html{
保证金：0；
填充：0；
字体系列：无衬线；
}
.flexbox{
显示器：flex；
最小高度：100vh；
颜色：白色；
字体大小：50px；
}
.一{
弹性：1；
背景:#FF7676；
利润率：10px；
}
.对{
弹性：2；
显示器：flex；
弯曲方向：立柱；
利润率：10px；
}
.二{
身高：40%；
显示器：flex；
边缘底部：20px；
右边距：10px；
}
.两个img{
宽度：100%；
保证金：0；
}
.右内{
显示器：flex；
弹性：2；
}
.3，
.4{
弹性：1；
}
.三{
背景#FF9BF7；
右边距：10px；
}
.4{
显示器：flex；
弯曲方向：立柱；
}
设置
.得到{
背景：#9BA4FF；
弹性：1；
保证金：5px；
}
.设置{
边际上限：0；
}
.得到{
页边距底部：0；
}
@介质（最大宽度：414px）{
.flexbox{
弯曲方向：立柱；
}
.flexbox>*{
弹性：1；
利润率：10px；
}
.得到，
.设置{
保证金：0；
边缘底部：10px；
}
.二{
顺序：-1；
弹性：0.100%；
页边距底部：0；
}
.两个img{
高度：100px；
}
.1，
.三{
宽度：50%；
保证金：0；
}
.一{
右边距：10px；
}
.顶{
显示器：flex；
柔性包装：包装；
}
}

1.
3.
4a
4b
您正在寻找实验性的网格语法。Flexbox适用于较小的小部件或组件布局系统。网格用于整个页面布局，非常棒

事实是，网格目前仅在IE、Edge和即将推出的Safari浏览器中受支持，但Firefox和Chrome的支持据称指日可待，通过在这些浏览器中启用正确的开发者标志，您可以从今天开始尝试

下面是一些示例代码，但同样，只有当您的浏览器支持新的网格语法时，它才会起作用


*{
框大小：边框框；
}
.flexbox{
宽度：320px；
显示：网格；
网格模板柱：calc（50%-0.5ch）calc（50%-0.5ch）；
网格间距：1ch；
}
.一{
顺序：2；
背景色：红色；
}
.二{
网格柱：1/3；
顺序：1；
背景颜色：绿色；
}
.三{
顺序：3；
背景颜色：粉红色；
}
.4{
显示：网格；
网格柱：1/3；
网格间距：1ch；
顺序：4；
背景颜色：淡紫色；
}
.内胆{
背景色：紫罗兰色；
}
@媒体屏幕和屏幕（最小宽度：500px）{
.flexbox{
宽度：500px；
网格模板柱：calc（33.333%-0.333ch）calc（33.333%-0.333ch）calc（33.333%-0.333ch）；
}
.一{
网格行：1/3；
顺序：1；
}
.二{
顺序：2；
网格柱：2/4；
}
.三{
顺序：3；
}
.4{
网格柱：3/4；
顺序：4；
}
}

乱数假文
多洛·希特·阿梅特
同侧阴唇
同侧阴唇
同侧阴唇
问题在于，如果您希望能够重新排列所有项目，它们必须是同一flex容器中的flex项目。但是Flexbox并没有提供任何直接的方法使一个元素占用多条柔性线

但是，您可以使用多个容器和：

元素本身不生成任何框，而是生成其子元素和子元素
伪元素仍然像正常情况一样生成长方体。为了
框生成和布局时，必须将元素视为
已替换为文档中的子元素和伪元素
树


/*桌面*/
.集装箱{
显示器：flex；
柔性包装：包装；
}
.容器>*{
柔性生长：1；
}
.项目