有没有可能做到这一点；复杂的；使用Flexbox进行布局，而不在HTML代码的某些部分周围添加div容器

我有一个简单的问题。 如果不在我的HTML上添加div，是否可以仅使用Flexbox创建

我成功地获得了这个布局，通过使用一些div（右边和左边的两个部分，等等）来剪切我的HTML结构，但是当我试图不添加这些div来完成它时，我被卡住了

是HTML结构我想弄明白

*{
填充：0；
保证金：0；
框大小：边框框；
}
主要{
高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
部分{
背景颜色：蓝色；
高度：800px；
宽度：800px；
}

---

如果您愿意查看css网格，您可以尝试以下方法：

基本上，您可以定义一个网格，然后将元素放置在网格中任何需要的位置

html, body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding:0px;
}
section {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 25% 25% 25% 25%;
  width: 100%;
  height: 100%;
}

section div.box1 {
  background-color: #f00;
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 1;
  grid-row-end: span 2;
}

section div.box2 {
  background-color: #f90;
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 3;
  grid-row-end: span 1;
}

/* ... etc ... */

---

仅使用flexbox而不添加任何div是不可能的。它可以通过使用grids@karthick. 谢谢你的回复。所以我不再试图这样做了^^有一个使用额外div的解决方案，你可能不喜欢。但是作为参考，谢谢，但是，我试着用flex来做。而且，它不是一个25%的四等分的正方形。@WesK你可以根据你想要的大小调整列，我选择了4x25%，因为它更简单，并且传达了进行额外细分的想法。如果需要额外的细分，可以创建8行或12行，而不是4行。@WesK这样布局中的项目就具有动态高度了？然后，你应该考虑砌体布局-不可能与Frasbox