CSS-Druck und Flexbox ⇐ CSS

[Anonymous]

Hallo, ich möchte eine Seite mit CSS-Druck erstellen.
Ich habe mich im Internet umgesehen und einiges ausprobiert, aber leider funktioniert die Ausrichtung nicht.

Das Layout, das ich erstellen möchte:



hier ist mein HTML

Code: Select all

....
....

Also habe ich versucht, etwas CSS mit der Printmedien-Abfrage zu erstellen

Code: Select all

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

Es lief nicht wie erwartet. (Leere Seite lassen und die Elemente nicht biegen)