打印时如何覆盖 flex-xs 断点？答案

【问题标题】：How can I override the flex-xs breakpoint when printing?打印时如何覆盖 flex-xs 断点？
【发布时间】：2020-09-01 18:31:16
【问题描述】：

我有一排复选框，当屏幕尺寸足够小（小于 600 像素）时，它们会折叠成列。

这很好，但是现在当我尝试打印此文档时，移动断点会激活，并以列而不是我想要的行堆叠。

这是我拥有的 html 的最小示例。

<div id="printCheckbox" flex="100" layout="row" layout-xs="column" layout-wrap>
    <div flex="33" flex-xs="100" >
        <md-checkbox>1</md-checkbox>
    </div>
    <div flex="33" flex-xs="100" >
        <md-checkbox>2</md-checkbox>
    </div>
    <div flex="33" flex-xs="100" >
        <md-checkbox>3</md-checkbox>
    </div>
    <div flex="33" flex-xs="100" >
        <md-checkbox>4</md-checkbox>
    </div>
    <div flex="33" flex-xs="100" >
        <md-checkbox>5</md-checkbox>
    </div>
    <div flex="33" flex-xs="100" >
        <md-checkbox>6</md-checkbox>
    </div>
</div>

我显然可以删除移动支持以正确使用打印视图功能，但是我想知道是否可以覆盖 css 中的 flex-xs 值。

这是我在 css 中尝试做的事情

@media only print {
    #printCheckbox{
        [flex-xs="100"] {
        // Make them 33?
        }
    }
}

那么是否可以在 css 中为 flex-xs 提供不同的值？还是完全禁用移动断点？

【问题讨论】：

标签： html css angularjs sass

【解决方案1】：

我并没有真正做我想做的事，但我自己找到了解决方法。

我为复选框的父容器制作了这个 CSS

@media screen and (max-width: 600px) {
    .printCheckBoxContainer{
        flex-direction: column;
    }
    .printCheckBox{
        flex-direction: column;
        flex-basis: 100%;
    }
}

@media only print {
    .printCheckBoxContainer{
        align-items: center;
        flex-wrap: wrap;
        flex-direction: row;
    }
    .printCheckBox{
        align-self: center;
        flex-basis: 33%;
    }

然后改变我的 HTML 看起来像

<div class="printCheckBoxContainer" class="verify-identity" flex="100" layout="row" layout-wrap>
    <div class="printCheckBox" flex="33">
        <md-checkbox></md-checkbox>
    </div>
    <div class="printCheckBox" flex="33">
        <md-checkbox></md-checkbox>
    </div>
    <div class="printCheckBox" flex="33">
        <md-checkbox></md-checkbox>
    </div>
    <div class="printCheckBox" flex="33">
        <md-checkbox></md-checkbox>
    </div>
    <div class="printCheckBox" flex="33">
        <md-checkbox></md-checkbox>
    </div>
    <div class="printCheckBox" flex="33">
        <md-checkbox></md-checkbox>
    </div>
</div>

所以我保留了默认断点，然后根据媒体查询在 css 中指定 flex-basis。基本的东西，但它有效！

除非我在几天内得到更好的答案，否则我会接受我自己的答案。

【讨论】：