0

I have created a very basic flexbox layout with 12 columns. The problem which I'm facing is that my columns work only when I use a div container with class row. I'm not able to find out why it is working in that way. Can some one please help me or give an insight how to proceed.

My Code.

_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));
      }
    }
  }
Sajjad Tabreez
  • 188
  • 4
  • 21

1 Answers1

0

.row has display: flex;

This determines that the direct children of .row elements be flex items. If those don't have a parent flex container, they are not flex items and cannot be layout in the flex way

yunzen
  • 32,854
  • 11
  • 73
  • 106
  • But in bootstrap, even if we don't use row class, the column classes used to work. How that can be achieved in my code. – Sajjad Tabreez May 08 '19 at 09:10
  • Bootstrap up to and including version 3 used `float` instead of flex for the columns layout. Float is used on the items themselves as opposed to the flex used on the container – yunzen May 08 '19 at 09:35
  • You cannot achieve a flexbox layout without having a flexbox container. It could be of course any element that can be a container, even `body`. It's only necessary that it's the direct parent of the items you want to layout – yunzen May 08 '19 at 09:37