Odoo QWeb - 创建 pdf 报告时 Flexbox 不工作答案

【问题标题】：Odoo QWeb - Flexbox not working when create pdf reportOdoo QWeb - 创建 pdf 报告时 Flexbox 不工作
【发布时间】：2021-09-08 14:34:39
【问题描述】：

当下面的代码在 HTML 中使用并使用浏览器打开时，flexbox 效果就是我想要的。但是当我在QWeb中使用相同的代码时，输出的结果是不同的（flex div没有分成两段）。

<div style="display: flex;">
    <div style="border: 1px solid #ccc; flex: 1;">
        <p>Lorem</p>
        <p>Ipsum</p>
        <p>Dolor</p>
    </div>
    <div style="border: 1px solid #ccc; flex: 1;">
        <p>Lorem</p>
        <p>Ipsum</p>
        <p>Dolor</p>
    </div>
</div>

浏览器

PDF 报告

【问题讨论】：

在 qweb 中，使用 div class='float-left col-6' 和 float-right
但我想使用 flexbox 代替，因为我不只是想将页面分成 2 个部分。
根据我的经验，display:flex 在 qweb 中不起作用。

标签： flexbox odoo qweb

【解决方案1】：

问题不是 qweb 而是 wkhtmltopdf。你可以试试Using Flex/CSS with wkhtmltopdf中提到的webkit-box

<div style="display: flex; display: -webkit-box; -webkit-box-pack: center; justify-content: center;">
    <div style="border: 1px solid #ccc; flex: 1; -webkit-box-flex: 1; -webkit-flex: 1;">
        <p>Lorem</p>
        <p>Ipsum</p>
        <p>Dolor</p>
    </div>
    <div style="border: 1px solid #ccc; flex: 1; -webkit-box-flex: 1; -webkit-flex: 1; margin-right: 0;">
        <p>Lorem</p>
        <p>Ipsum</p>
        <p>Dolor</p>
    </div>
</div>

【讨论】：