CSSのflexで印刷時に崩れる

質問

CSSのflexを使ってブラウザ上では正しく表現できていますが、印刷するとflexが無効になり、横並びだったのが縦に表示されてしまいます。

さらに中の文字もboxからはみ出して表示されてしまいます。
FirefoxやChromeどちらも同じでした。

印刷時に崩れない方法はあるのでしょうか？
下記がCSSです。

@media screen and (min-width: 481px){
.parent {
display: flex;
}
.box1 {
border: 1px;
}
.box2 {
border: 1px;
}
}

回答No.1

t_ohta · ベストアンサー

「@media screen」と指定しているので画面表示の時しかそのスタイルは適用されません。
印刷時のスタイルを指定したければ「@media print」と指定した印刷用のスタイルを用意しましょう。

お礼

指摘されないとなかなか気づかないですね。ありがとうございました。

Powered by GRATICA