Мои столбцы работают только когда я даю класс строки - PullRequest
Новая
       17

Мои столбцы работают только когда я даю класс строки

0 голосов
/ 08 мая 2019

Я создал очень простой макет flexbox с 12 столбцами. Проблема, с которой я сталкиваюсь, заключается в том, что мои столбцы работают только тогда, когда я использую контейнер 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));
      }
    }
  }

1 Ответ

0 голосов
/ 08 мая 2019

.row имеет display: flex;

Это определяет, что прямые дочерние элементы .row элементов являются гибкими элементами.Если у них нет родительского flex-контейнера, они не являются flex-элементами и не могут быть размечены по гибкому пути

...