具有 1 个元素的行和列

Posted 2023-02-19

【中文标题】具有 1 个元素的行和列

【英文标题】：row and columns with 1 element

【发布时间】：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 问题？

【参考方案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 只是要隐藏其子级的边距，因此不会在父级上设置边距，而是在子级上。