css - CSS 打印和 Flexbox

Question

您好，我想使用 css 打印创建一些页面。我环顾四周，在网上尝试了一些东西，但遗憾的是对齐不起作用。

我要制作 的布局：

这是我的html

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

所以我尝试用打印媒体查询做一些CSS

@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*/
   }
 }

它没有按预期进行。（留下空白页，不弯曲元素）

标签： cssprintingflexboxcss-print