Verwendung von Flex/CSS mit wkhtmltopdf

Ich habe erfolgreich eine Liste mit der folgenden Antwort mit Flexbox auf meiner HTML-Seite erstellt. Wie zeige ich 3 Elemente pro Zeile in Flexbox an?

Ich muss mit diesen Daten ein PDF erstellen und verwende wkhtmltopdf (https://wkhtmltopdf.org/), was auch gut funktioniert, aber das generierte PDF hat alle meine Listenelemente in 1 langen Spalte statt 3 pro Zeile.

Es sieht so aus, als ob das CSS nicht verarbeitet wird, wenn die PDF-Generierung stattfindet, jeder Einblick wird geschätzt.

Das hat bei mir funktioniert:

.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;
}

Sehen https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1522 für weitere Informationen.

Ich habe dieses Problem gelöst mit:

Äquivalent von display:flex; ==> display: -webkit-box;

Äquivalent von justify-content: space-between; ==> -webkit-box-pack: justify;

Einige nützliche Informationen stammen von:
https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1522

Ich habe Autoprefixer in meiner Anwendung verwendet, um Präfixe automatisch hinzuzufügen. Sie müssen nur aktualisieren browsersList mit ie >= 9.

Versuchen Sie, die Breite der flexiblen Spalten zu verringern. Als ich beispielsweise versuchte, 50/50-Spalten zu erstellen, musste ich eine Breite von 49,8 % anstelle von 50 % eingeben. Ich hoffe es hilft.

Um Flex oder Boxen beim Konvertieren in PDF zu verwenden, benötigen Sie ein Webkit-Beispiel: –

display: flex;
display: -webkit-flex;

für Justify-Content und Align-Items müssen Sie verwenden

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

Als Fix für Bootstrap 5 habe ich beim Arbeiten mit wkhtmltopdf 0.12.* den folgenden Stil gefunden und vervollständigt

            <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>

Quelle hat mir den Tag gerettet, als ich von BS 4 auf BS 5 aktualisiert habe.

Das hat bei mir funktioniert:

.row {
  white-space: nowrap;
  > div {
    display: inline-block;
    white-space: normal;
  }
}