如何让Flex容器忽略.wrap中间层，实现等同于无该节点的布局效果？

完全可以实现，核心是使用CSS的display: contents属性，操作方式如下：

• 给中间层.wrap元素添加如下样式：

.wrap {
  display: contents;
}

原理解释 #

display: contents的作用是让被设置的元素本身不生成任何渲染盒模型，它的所有直接子元素会直接「提升」到该元素所在的布局层级，参与父级的布局计算。
设置完成后，.wrap自身的盒相关样式（边距、边框、背景、宽高等）都会失效，两个.item会直接作为.flexcont的弹性子项参与flex布局，最终效果和不存在.wrap节点的布局完全一致。

注意事项 #

• 该属性仅影响布局渲染逻辑，.wrap节点本身仍然存在于DOM树中，绑定的事件、自定义属性等都可以正常生效。
• 目前所有主流现代浏览器（Chrome 65+、Firefox 59+、Safari 11.1+、Edge 79+）都支持该属性，仅IE系列浏览器完全不兼容，常规业务场景可放心使用。

内容的提问来源于stack exchange，提问作者buga