具有 1 个元素的行和列答案

【问题标题】：row and columns with 1 element具有 1 个元素的行和列
【发布时间】：2021-12-24 13:32:47
【问题描述】：

对于此处给出的示例： https://quasar.dev/layout/grid/gutter#pros-cons-and-how-to-workaround-problems-q-gutter-size-vs-q-col-gutter-size 我可以知道吗

示例中的行和列的功能是什么，因为我们只有一项？
为什么使用 row 和 overflow-auto 可以解决 gutter-size 问题？

【问题讨论】：

标签： html css quasar-framework quasar

【解决方案1】：

第一点

基本代码是：

.column, .flex, .row {
    display: flex;
    flex-wrap: wrap;
}
.column {
    flex-direction: column;
}

因此，对于这些示例，它并没有多大意义，但还有 offset-1 和 .col-3，为此，需要 .row（还有更长的块）：

@media (min-width: 0)
.row>.offset-1, .row>.offset-xs-1 {
    margin-left: 8.3333%;
}
@media (min-width: 0)
.row>.col-3, .row>.col-xs-3 {
    height: auto;
    width: 25%;
}

我不知道他们为什么这样做......因为他们也可以设置col-x normaly（除了创建优先级）：

.col-0, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-xs-0, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-auto {
    flex: 0 0 auto;
}

第二点

overflow-auto 只是要隐藏其子级的边距，因此不会在父级上设置边距，而是在子级上。

【讨论】：