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?
Necesito 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.
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.
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; }Consulte https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1522 para obtener más información.
Usé autoprefixer en mi aplicación para agregar prefijos automáticamente. Solo necesita actualizar browsersList con ie >= 9 .
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;Resolví este problema usando:
equivalente de display:flex; ==> display: -webkit-box;
equivalente de justify-content: space-between; ==> -webkit-box-pack: justify;
Algunas informaciones útiles provienen de: https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1522
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>La fuente me salvó el día al actualizar de bs 4 a bs 5.