Using Flex/css With Wkhtmltopdf

I've successfully created a list using the following answer with flexbox on my HTML page How to display 3 items per row in flexbox? I have a need to create a PDF with this data and

Solution 1:

This worked for me :

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

See https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1522 for more informations.

Solution 2:

I used autoprefixer in my application to automatically add prefixes. You just need to update browsersList with ie >= 9.

Solution 3:

To use flex or boxes while converting to pdf, You need webkit Example:-

display: flex;
display: -webkit-flex;

for justify-content and align items you have to use

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

Solution 4:

Try to decrease the width of the flex columns. For example when I tried to make 50/50 columns I had to put a width of 49.8% instead of 50%. Hope it helps.

Solution 5:

I resolved this issue using:

equivalent of display:flex; ==> display: -webkit-box;

equivalent of justify-content: space-between; ==> -webkit-box-pack: justify;

Some useful informations coming from: https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1522