Uso de Flex/CSS con wkhtmltopdf

Creé con éxito una lista usando la siguiente respuesta con flexbox en mi página HTML ¿Cómo mostrar 3 elementos por fila en flexbox?

Tengo la necesidad de crear un PDF con estos datos y estoy usando wkhtmltopdf (https://wkhtmltopdf.org/) que también funciona bien, sin embargo, el PDF generado tiene todos mis Elementos de lista en 1 columna larga en lugar de 3 por fila.

Parece que el CSS no se está procesando cuando se está generando el PDF. Se agradece cualquier información.

Esto funcionó para mí:

.row {
    display: -webkit-box; /* wkhtmltopdf uses this one */
    display: flex;
    -webkit-box-pack: center; /* wkhtmltopdf uses this one */
    justify-content: center;
}

.row > div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

.row > div:last-child {
    margin-right: 0;
}

Ver https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1522 para más información

Resolví este problema usando:

equivalente de display:flex; ==> display: -webkit-box;

equivalente de justify-content: space-between; ==> -webkit-box-pack: justify;

Algunas informaciones útiles provenientes de:
https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1522

Usé autoprefixer en mi aplicación para agregar prefijos automáticamente. Solo necesitas actualizar browsersList con ie >= 9.

Intente disminuir el ancho de las columnas flexibles. Por ejemplo cuando traté de hacer 50/50 columnas tuve que poner un ancho de 49.8% en vez de 50%. Espero eso ayude.

Para usar flex o cajas al convertir a pdf, necesita webkit Ejemplo: –

display: flex;
display: -webkit-flex;

para justificar el contenido y alinear los elementos que debe usar

-webkit-align-self: flex-end;
 align-self: flex-end;
webkit-justify-content: space-between;
justify-content: space-between;

Como arreglo para Bootstrap 5, trabajando con wkhtmltopdf 0.12.*, encontré y completé el siguiente estilo

            <style>
                /* Fix wkhtmltopdf compatibility with BS flex features */

                .row {
                    display: -webkit-box;
                    display: flex;
                    -webkit-box-pack: center;
                    justify-content: center;
                }

                .row>div {
                    -webkit-box-flex: 1;
                    -webkit-flex: 1;
                    flex: 1;
                }

                .row>div:last-child {
                    margin-right: 0;
                }


                /* Fix wkhtmltopdf compatibility with BS tables borders */


                /* Requires cellspacing="0" on table to prevent spacing */

                table {
                    border-collapse: separate !important;
                }

                th,
                td {
                    border-top: none;
                    border-left: none;
                    border-right: none;
                }

            </style>

fuente me salvó el día al actualizar de bs 4 a bs 5.