CSS 打印和 Flexbox

Question

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

我想要生成的 布局：

这是我的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*/
   }
 }

事情没有按预期进行。（保留空白页面并且不弯曲元素）

Answer 1

我为类似的事情挣扎了半天。就我而言，这是关于摆脱flex页面打印方向（即自上而下）：

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

或者，当然，您可以阅读大量 CSS 并弄清楚如何使弹性项目按您的意愿增长/收缩和打印中断。