FlyingSaucer结合OpenPDF生成PDF时flex布局无法正确渲染问题咨询

你使用的9.1.22版本FlyingSaucer（基于OpenPDF的发行版）不支持Flex盒模型。

FlyingSaucer官方的CSS支持范围始终以CSS 2.1规范为核心，仅额外实现了极少部分高频CSS3特性，Flex布局作为CSS3新增的布局模块，目前完全没有被纳入FlyingSaucer的渲染实现，因此你写的display: flex规则会被引擎直接忽略，对应元素会按照默认块级元素的行为渲染，就会出现你碰到的和普通div表现一致的问题。

你示例中需要的子元素横向排列效果，可以用CSS2.1兼容的写法实现，修改后的样式参考如下：

.flex-container {
  background-color: DodgerBlue;
  overflow: hidden; /* 解决浮动导致的父容器高度塌陷问题 */
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
  float: left; /* 实现横向排列效果 */
}

如果需要实现类似flex的等宽、垂直对齐等特性，可以改用display: table配合display: table-cell的规则模拟。

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