CSS print and Flexbox

user_7334912 0
Viewed 3312

Hello I would like to create some page using css print. I looked around and the web I tried some stuff but saddly the alignment is not working.

The Layout I want to produce: My layout

here is my html 

<section class ="page_1">
   <p class="paragraph_1"> .... </p>
   <p class="paragraph_2"> .... </p>
</section>

So I tried to make some css with the print media query

@page {
   size: 8cm 13cm; /*custom size*/
   }
 @media print {
   section[class ^="page"] {
     position: relative;
     /*Same as the page size*/
     width: 8cm;
     height: 13cm;
     display: flex;
     justify-content: space-around;
     flex-direction: column;
     align-items: center;
     page-break-after: always;
     padding: 0.5cm 2cm;
   }
   p[class ^="paragraph"] {
     /*NOTHING TO ADD FOR THE ALIGNEMENT*/
   }
 }

It did not go as expected. (leave blank page and does not flex the elements)

css-print flexbox printing css
1 Answers

I struggled with something similar for half-a-day. In my case it was about getting rid of the flex in the direction the pages print (i.e. top-down):

display: flex; /* try to replace this with non-flex CSS rule */
flex-direction: column; /* try to replace this with non-flex CSS rule */

Or, of course, you can read a lot of CSS and figure out how to make flex items grow/shrink and print-brake as you wish.

user_143528410
Related