CSS 打印和 Flexbox

Question

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

The Layout我想生产:

这是我的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 并弄清楚如何使 flex 元素按您的意愿增长/收缩和打印制动。