我的列只有在我给出行类时才有效

Question

我创建了一个非常基本的 12 列的 flexbox 布局。我面临的问题是我的列仅在我使用带有类行的 div 容器时才起作用。我无法找出它为什么以这种方式工作。有人可以帮助我或提供有关如何进行的见解。

我的代码。

_variables.scss

// Grid Variables
$grid-columns: 12;

//Device-Breakpoints

$device-xs: 540px;
$device-sm: 768px;
$device-md: 992px;
$device-lg: 1200px;

_helpers.scss

@mixin border-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
}

grid.scss

@import "variables";
@import "helpers";

*.container {
    @include border-box;
    margin: 0 auto;
    padding: 0 1em;

    @media (min-width: $device-xs) {
      max-width: $device-xs;
    }

    @media (min-width: $device-sm) {
      max-width: $device-sm;
    }

    @media (min-width: $device-md) {
      max-width: $device-md;
    }

    @media (min-width: $device-lg) {
      max-width: $device-lg;
    }
  }

  .row {
    @include border-box;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1em;
  }

  @for $i from 1 through $grid-columns {
    .col-xs-#{$i},
    .col-sm-#{$i},
    .col-md-#{$i},
    .col-lg-#{$i} {
        @include border-box;
        padding: 1em;
      width: 100%;
    }

    .col-xs-#{$i} {
      @media (min-width: $device-xs) {
        width: calc(100% * (#{$i} / 12));
      }
    }

    .col-sm-#{$i} {
      @media (min-width: $device-sm) {
        width: calc(100% * (#{$i} / 12));
      }
    }

    .col-md-#{$i} {
      @media (min-width: $device-md) {
        width: calc(100% * (#{$i} / 12));
      }
    }

    .col-lg-#{$i} {
      @media (min-width: $device-lg) {
        width: calc(100% * (#{$i} / 12));
      }
    }
  }

Answer 1

.row 有display: flex;

这决定了.row 元素的直接子元素是弹性项目。如果它们没有父 flex 容器，则它们不是 flex 项，不能以 flex 方式布局