html – Flexbox布局模式：5平方(1大,4小)

概述我正在尝试组合一个flexbox布局 – 为了这个问题的目的,我将其称为’方块五块’布局(见图) – 但我遇到了麻烦,因为我尝试过的所有实验都做了没有正确包裹. 我已经看到使用浮点数完成相同的布局,但我希望能够在未来证明它一点并使用更新的方法 – 因此flexbox.我已经尝试过搜索这个模式,但似乎没有一致的名称,所以找到类似的例子证明是艰难的. 我也使用视口单元来确保块保持完全正方形,所有这些都 我正在尝试组合一个flexBox布局 – 为了这个问题的目的,我将其称为’方块五块’布局(见图) – 但我遇到了麻烦,因为我尝试过的所有实验都做了没有正确包裹.

我已经看到使用浮点数完成相同的布局,但我希望能够在未来证明它一点并使用更新的方法 – 因此flexBox.我已经尝试过搜索这个模式,但似乎没有一致的名称,所以找到类似的例子证明是艰难的.

我也使用视口单元来确保块保持完全正方形,所有这些都基于视口宽度(vw)单位.

div { wIDth: 25vw; height: 25vw; }div:first-of-type { wIDth: 50vw; height: 50vw; }

关键特征是所有块都应该是方形的,然而第一个块应该是剩下的四个块的大小.有没有人见过或曾经在这样的布局上工作过？

谢谢！！

解决方法 嵌套的flexBoxes可以与媒体查询结合使用.

Codepen Demo with media query

基本上：

* {  Box-sizing: border-Box;  margin: 0;  padding: 0;}.parent {  wIDth: 100vw;  display: flex;}.col {  flex: 0 0 50vw;  height: 50vw;  background: blue;}.wrap {  display: flex;  flex-wrap: wrap}.Box {  flex: 0 0 25vw;  height: 25vw;}.red {  background: red;}.pink {  background: pink;}.orange {  background: orange;}.grey {  background: grey;}

<div >  <div ></div>  <div >    <div ></div>    <div ></div>    <div ></div>    <div ></div>  </div></div>

总结

以上是内存溢出为你收集整理的html – Flexbox布局模式：5平方(1大,4小)全部内容，希望文章能够帮你解决html – Flexbox布局模式：5平方(1大,4小)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。