如何使用 DIV 对 Flexbox 项目进行分组，但不影响布局，就好像 DIV 不存在一样？

Answer 1

要让浏览器忽略

.my-group

，那么您可以在其上使用

display: contents

（请参阅有关 css 技巧的解释）。它基本上使

.my-group

的孩子看起来就像是

.root

的孩子。使用它有一些注意事项（请参阅caniuse.com），但如果您超出了这些限制，那么您应该很好。

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.tool-body {
  flex: 1 1 100%;
}

.my-group {
  display: contents;
}

<div class="root">
  <div class="my-group">
    <div class="toolbar">toolbar1</div>
    <div class="tool-body">body1</div>
  </div>

  <div class="my-group">
    <div class="toolbar">toolbar2</div>
    <div class="tool-body">body2</div>
  </div>

  <div class="my-group">
    <div class="toolbar">toolbar3</div>
    <div class="tool-body">body3</div>
  </div>
</div>