İbrahim Mesut Yılmaz Furontendlerin Divilupır Yakında Yayında HTML/SCSS PUG-SLIM NODE/ANGULAR - TYPESCRIPT REACT NATIVE İSTEDİĞİN GİBİ FLEX YAPINI OLUŞTUR İSTEDİĞİN İSMİ VER KAFANA GÖRE YAP :) kafası güzellere kafası güzel flex yapısı
	
/*
    $flexible     : kaç tane olacağı
    $mediaOnly    : media da olacak ekran genişliği
    $screen       : class ara adı (xl,lg,md,sm,xs) vs.
    $windowScreen : ekran genişliği 
    $percent      : flex yüzdesi %.
    $flex         : ön class adı.
    $i            : son class adı + flex sayısı. 
*/
@mixin flexBraham($flexible,$mediaOnly,$screen,$windowScreen: 0,$percent: 0,$flex: flex) {
    @media only screen and (min-width: #{$mediaOnly}px) {
        @if $mediaOnly > $windowScreen {
            @for $i from 1 through $flexible {
                .#{$flex}-#{$screen}-#{$i} { 
                	-ms-flex: $i $i $percent; 
                	-webkit-box-flex: $i;  
                	-webkit-flex: $i $i $percent; 
                	flex: $i $i $percent; 
                }
            }
        }
        @else {
            @for $i from 1 through $flexible {
                .#{$flex}-#{$screen}-#{$i} { 
                	-ms-flex: $i $i $percent; 
                	-webkit-box-flex: $i;  
                	-webkit-flex: $i $i $percent;  
                	flex: $i $i $percent; 
                }
            }
        }
    }
}
@include flexBraham(53,1453,braham); // öyle bi denedim ya. Ne mesajı? 
	
HMMMM...

    /*  
        NELER YAPABİLİRİZ?
        @include flexBraham(12,1500,xl);
        @include flexBraham(12,1200,lg);
        @include flexBraham(12,992,md);
        @include flexBraham(12,768,sm);
        @include flexBraham(12,0,xs);
    */
@media only screen and (min-width: 1500px) {
  .flex-xl-1  { -ms-flex: 1  1  0; -webkit-box-flex: 1;  -webkit-flex: 1  1  0; flex: 1  1  0; }
  .flex-xl-2  { -ms-flex: 2  2  0; -webkit-box-flex: 2;  -webkit-flex: 2  2  0; flex: 2  2  0; }
  .flex-xl-3  { -ms-flex: 3  3  0; -webkit-box-flex: 3;  -webkit-flex: 3  3  0; flex: 3  3  0; }
  .flex-xl-4  { -ms-flex: 4  4  0; -webkit-box-flex: 4;  -webkit-flex: 4  4  0; flex: 4  4  0; }
  .flex-xl-5  { -ms-flex: 5  5  0; -webkit-box-flex: 5;  -webkit-flex: 5  5  0; flex: 5  5  0; }
  .flex-xl-6  { -ms-flex: 6  6  0; -webkit-box-flex: 6;  -webkit-flex: 6  6  0; flex: 6  6  0; }
  .flex-xl-7  { -ms-flex: 7  7  0; -webkit-box-flex: 7;  -webkit-flex: 7  7  0; flex: 7  7  0; }
  .flex-xl-8  { -ms-flex: 8  8  0; -webkit-box-flex: 8;  -webkit-flex: 8  8  0; flex: 8  8  0; }
  .flex-xl-9  { -ms-flex: 9  9  0; -webkit-box-flex: 9;  -webkit-flex: 9  9  0; flex: 9  9  0; }
  .flex-xl-10 { -ms-flex: 10 10 0; -webkit-box-flex: 10; -webkit-flex: 10 10 0; flex: 10 10 0; }
  .flex-xl-11 { -ms-flex: 11 11 0; -webkit-box-flex: 11; -webkit-flex: 11 11 0; flex: 11 11 0; }
  .flex-xl-12 { -ms-flex: 12 12 0; -webkit-box-flex: 12; -webkit-flex: 12 12 0; flex: 12 12 0; } 
}
@media only screen and (min-width: 1200px) {
  .flex-lg-1  { -ms-flex: 1  1  0; -webkit-box-flex: 1;  -webkit-flex: 1  1  0; flex: 1  1  0; }
  .flex-lg-2  { -ms-flex: 2  2  0; -webkit-box-flex: 2;  -webkit-flex: 2  2  0; flex: 2  2  0; }
  .flex-lg-3  { -ms-flex: 3  3  0; -webkit-box-flex: 3;  -webkit-flex: 3  3  0; flex: 3  3  0; }
  .flex-lg-4  { -ms-flex: 4  4  0; -webkit-box-flex: 4;  -webkit-flex: 4  4  0; flex: 4  4  0; }
  .flex-lg-5  { -ms-flex: 5  5  0; -webkit-box-flex: 5;  -webkit-flex: 5  5  0; flex: 5  5  0; }
  .flex-lg-6  { -ms-flex: 6  6  0; -webkit-box-flex: 6;  -webkit-flex: 6  6  0; flex: 6  6  0; }
  .flex-lg-7  { -ms-flex: 7  7  0; -webkit-box-flex: 7;  -webkit-flex: 7  7  0; flex: 7  7  0; }
  .flex-lg-8  { -ms-flex: 8  8  0; -webkit-box-flex: 8;  -webkit-flex: 8  8  0; flex: 8  8  0; }
  .flex-lg-9  { -ms-flex: 9  9  0; -webkit-box-flex: 9;  -webkit-flex: 9  9  0; flex: 9  9  0; }
  .flex-lg-10 { -ms-flex: 10 10 0; -webkit-box-flex: 10; -webkit-flex: 10 10 0; flex: 10 10 0; }
  .flex-lg-11 { -ms-flex: 11 11 0; -webkit-box-flex: 11; -webkit-flex: 11 11 0; flex: 11 11 0; }
  .flex-lg-12 { -ms-flex: 12 12 0; -webkit-box-flex: 12; -webkit-flex: 12 12 0; flex: 12 12 0; } 
}
@media only screen and (min-width: 992px) {
  .flex-md-1  { -ms-flex: 1  1  0; -webkit-box-flex: 1;  -webkit-flex: 1  1  0; flex: 1  1  0; }
  .flex-md-2  { -ms-flex: 2  2  0; -webkit-box-flex: 2;  -webkit-flex: 2  2  0; flex: 2  2  0; }
  .flex-md-3  { -ms-flex: 3  3  0; -webkit-box-flex: 3;  -webkit-flex: 3  3  0; flex: 3  3  0; }
  .flex-md-4  { -ms-flex: 4  4  0; -webkit-box-flex: 4;  -webkit-flex: 4  4  0; flex: 4  4  0; }
  .flex-md-5  { -ms-flex: 5  5  0; -webkit-box-flex: 5;  -webkit-flex: 5  5  0; flex: 5  5  0; }
  .flex-md-6  { -ms-flex: 6  6  0; -webkit-box-flex: 6;  -webkit-flex: 6  6  0; flex: 6  6  0; }
  .flex-md-7  { -ms-flex: 7  7  0; -webkit-box-flex: 7;  -webkit-flex: 7  7  0; flex: 7  7  0; }
  .flex-md-8  { -ms-flex: 8  8  0; -webkit-box-flex: 8;  -webkit-flex: 8  8  0; flex: 8  8  0; }
  .flex-md-9  { -ms-flex: 9  9  0; -webkit-box-flex: 9;  -webkit-flex: 9  9  0; flex: 9  9  0; }
  .flex-md-10 { -ms-flex: 10 10 0; -webkit-box-flex: 10; -webkit-flex: 10 10 0; flex: 10 10 0; }
  .flex-md-11 { -ms-flex: 11 11 0; -webkit-box-flex: 11; -webkit-flex: 11 11 0; flex: 11 11 0; }
  .flex-md-12 { -ms-flex: 12 12 0; -webkit-box-flex: 12; -webkit-flex: 12 12 0; flex: 12 12 0; } 
}
@media only screen and (min-width: 768px) {
  .flex-sm-1  { -ms-flex: 1  1  0; -webkit-box-flex: 1;  -webkit-flex: 1  1  0; flex: 1  1  0; }
  .flex-sm-2  { -ms-flex: 2  2  0; -webkit-box-flex: 2;  -webkit-flex: 2  2  0; flex: 2  2  0; }
  .flex-sm-3  { -ms-flex: 3  3  0; -webkit-box-flex: 3;  -webkit-flex: 3  3  0; flex: 3  3  0; }
  .flex-sm-4  { -ms-flex: 4  4  0; -webkit-box-flex: 4;  -webkit-flex: 4  4  0; flex: 4  4  0; }
  .flex-sm-5  { -ms-flex: 5  5  0; -webkit-box-flex: 5;  -webkit-flex: 5  5  0; flex: 5  5  0; }
  .flex-sm-6  { -ms-flex: 6  6  0; -webkit-box-flex: 6;  -webkit-flex: 6  6  0; flex: 6  6  0; }
  .flex-sm-7  { -ms-flex: 7  7  0; -webkit-box-flex: 7;  -webkit-flex: 7  7  0; flex: 7  7  0; }
  .flex-sm-8  { -ms-flex: 8  8  0; -webkit-box-flex: 8;  -webkit-flex: 8  8  0; flex: 8  8  0; }
  .flex-sm-9  { -ms-flex: 9  9  0; -webkit-box-flex: 9;  -webkit-flex: 9  9  0; flex: 9  9  0; }
  .flex-sm-10 { -ms-flex: 10 10 0; -webkit-box-flex: 10; -webkit-flex: 10 10 0; flex: 10 10 0; }
  .flex-sm-11 { -ms-flex: 11 11 0; -webkit-box-flex: 11; -webkit-flex: 11 11 0; flex: 11 11 0; }
  .flex-sm-12 { -ms-flex: 12 12 0; -webkit-box-flex: 12; -webkit-flex: 12 12 0; flex: 12 12 0; } 
}
@media only screen and (min-width: 0px) {
  .flex-xs-1  { -ms-flex: 1  1  0; -webkit-box-flex: 1;  -webkit-flex: 1  1  0; flex: 1  1  0; }
  .flex-xs-2  { -ms-flex: 2  2  0; -webkit-box-flex: 2;  -webkit-flex: 2  2  0; flex: 2  2  0; }
  .flex-xs-3  { -ms-flex: 3  3  0; -webkit-box-flex: 3;  -webkit-flex: 3  3  0; flex: 3  3  0; }
  .flex-xs-4  { -ms-flex: 4  4  0; -webkit-box-flex: 4;  -webkit-flex: 4  4  0; flex: 4  4  0; }
  .flex-xs-5  { -ms-flex: 5  5  0; -webkit-box-flex: 5;  -webkit-flex: 5  5  0; flex: 5  5  0; }
  .flex-xs-6  { -ms-flex: 6  6  0; -webkit-box-flex: 6;  -webkit-flex: 6  6  0; flex: 6  6  0; }
  .flex-xs-7  { -ms-flex: 7  7  0; -webkit-box-flex: 7;  -webkit-flex: 7  7  0; flex: 7  7  0; }
  .flex-xs-8  { -ms-flex: 8  8  0; -webkit-box-flex: 8;  -webkit-flex: 8  8  0; flex: 8  8  0; }
  .flex-xs-9  { -ms-flex: 9  9  0; -webkit-box-flex: 9;  -webkit-flex: 9  9  0; flex: 9  9  0; }
  .flex-xs-10 { -ms-flex: 10 10 0; -webkit-box-flex: 10; -webkit-flex: 10 10 0; flex: 10 10 0; }
  .flex-xs-11 { -ms-flex: 11 11 0; -webkit-box-flex: 11; -webkit-flex: 11 11 0; flex: 11 11 0; }
  .flex-xs-12 { -ms-flex: 12 12 0; -webkit-box-flex: 12; -webkit-flex: 12 12 0; flex: 12 12 0; } 
}

    /*  
        GIBIIII...
    */

ALTERNATİF OLARAK BİŞEYLER DAHA DÜŞÜNDÜK daha az kod daha fazla iş. hangisi işine yararsa artık? belki sen daha iyisini yaparsın? soru şu= neye ihtiyacın var?
	
/*
    $flexible     : kaç tane olacağı
    $mediaOnly    : media da olacak ekran genişliği
    $mediaOnly2   : media da olacak ekran genişliği
    $screen       : class ara adı (xl,lg,md,sm,xs) vs.
    $percent      : flex yüzdesi %.
    $size         : width yada height
    $min          : minimum
    $max          : maximum
    $flex         : ön class adı.
    $i            : son class adı + flex sayısı. 
*/
@mixin flexBraham($flexible,$mediaOnly,$mediaOnly2,$screen,$percent: 0,$size: width,$min: min,$max: max,$flex: flex) {
    @media only screen and (#{$min}-#{$size}: #{$mediaOnly}px) and (#{$max}-#{$size}: #{$mediaOnly2}px) {
        @for $i from 1 through $flexible {
            .#{$flex}-#{$screen}-#{$i} {
                -ms-flex: $i $i $percent;
                -webkit-box-flex: $i;
                -webkit-flex: $i $i $percent;
                flex: $i $i $percent;
            }
        }
    }
}

@include flexBraham(53,1453,2023,braham); // öyle bi denedim ya. Ne mesajı? 
	
HMMMM...

    /*  
        NELER YAPABİLİRİZ?
        @include flexBraham(53,1453,2023,braham); ben denemeyi ekleydim geriside sizde artık.
    */

@media only screen and (min-width: 1453px) and (max-width: 2023px) {
  .flex-braham-1  { -ms-flex: 1  1  0; -webkit-box-flex: 1;  -webkit-flex: 1  1  0; flex: 1  1  0; }
  .flex-braham-2  { -ms-flex: 2  2  0; -webkit-box-flex: 2;  -webkit-flex: 2  2  0; flex: 2  2  0; }
  .flex-braham-3  { -ms-flex: 3  3  0; -webkit-box-flex: 3;  -webkit-flex: 3  3  0; flex: 3  3  0; }
  .flex-braham-4  { -ms-flex: 4  4  0; -webkit-box-flex: 4;  -webkit-flex: 4  4  0; flex: 4  4  0; }
  .flex-braham-5  { -ms-flex: 5  5  0; -webkit-box-flex: 5;  -webkit-flex: 5  5  0; flex: 5  5  0; }
  .flex-braham-6  { -ms-flex: 6  6  0; -webkit-box-flex: 6;  -webkit-flex: 6  6  0; flex: 6  6  0; }
  .flex-braham-7  { -ms-flex: 7  7  0; -webkit-box-flex: 7;  -webkit-flex: 7  7  0; flex: 7  7  0; }
  .flex-braham-8  { -ms-flex: 8  8  0; -webkit-box-flex: 8;  -webkit-flex: 8  8  0; flex: 8  8  0; }
  .flex-braham-9  { -ms-flex: 9  9  0; -webkit-box-flex: 9;  -webkit-flex: 9  9  0; flex: 9  9  0; }
  .flex-braham-10 { -ms-flex: 10 10 0; -webkit-box-flex: 10; -webkit-flex: 10 10 0; flex: 10 10 0; }
  .flex-braham-11 { -ms-flex: 11 11 0; -webkit-box-flex: 11; -webkit-flex: 11 11 0; flex: 11 11 0; }
  .flex-braham-12 { -ms-flex: 12 12 0; -webkit-box-flex: 12; -webkit-flex: 12 12 0; flex: 12 12 0; }
}

    /*  
        GIBIIII...
    */

DENE BAKALIM NASIL Bİ PALET ÇIKICAK KARŞINA? HMM.. işsizlere iş. ne işine yarayacak bu palet? at çöpeee
	
@mixin backMath($q:53,$w:553,$e:353,$r:5353,$t:5553,$y:3353) {
    $diez : '#';
    @for $i from 0 through 9 {
        $a: $q*$w+$i; $s: $w*$e+$i; $d: $e*$r+$i; $f: $r*$t+$i; $g: $t*$y+$i; $h: $y*$q+$i;
        @if $a > 9 { $a: $a % 16; 
            @if $a == 10{ $a : 'a'; } 
            @else if $a == 11{ $a : 'b'; } 
            @else if $a == 12{ $a : 'c'; } 
            @else if $a == 13{ $a : 'd'; } 
            @else if $a == 14{ $a : 'e'; } 
            @else if $a == 15{ $a : 'f'; }
        }
        @if $s > 9 { $s: $s % 16; 
            @if $s == 10{ $s : 'a'; } 
            @else if $s == 11{ $s : 'b'; } 
            @else if $s == 12{ $s : 'c'; } 
            @else if $s == 13{ $s : 'd'; } 
            @else if $s == 14{ $s : 'e'; } 
            @else if $s == 15{ $s : 'f'; }
        }
        @if $d > 9 { $d: $d % 16; 
            @if $d == 10{ $d : 'a'; } 
            @else if $d == 11{ $d : 'b'; } 
            @else if $d == 12{ $d : 'c'; } 
            @else if $d == 13{ $d : 'd'; } 
            @else if $d == 14{ $d : 'e'; } 
            @else if $d == 15{ $d : 'f'; }
        }
        @if $f > 9 { $f: $f % 16; 
            @if $f == 10{ $f : 'a'; } 
            @else if $f == 11{ $f : 'b'; } 
            @else if $f == 12{ $f : 'c'; } 
            @else if $f == 13{ $f : 'd'; } 
            @else if $f == 14{ $f : 'e'; } 
            @else if $f == 15{ $f : 'f'; }
        }
        @if $g > 9 { $g: $g % 16; 
            @if $g == 10{ $g : 'a'; } 
            @else if $g == 11{ $g : 'b'; } 
            @else if $g == 12{ $g : 'c'; }
            @else if $g == 13{ $g : 'd'; } 
            @else if $g == 14{ $g : 'e'; } 
            @else if $g == 15{ $g : 'f'; }
        }
        @if $h > 9 { $h: $h % 16;
            @if $h == 10{ $h : 'a'; } 
            @else if $h == 11{ $h : 'b'; } 
            @else if $h == 12{ $h : 'c'; } 
            @else if $h == 13{ $h : 'd'; } 
            @else if $h == 14{ $h : 'e'; } 
            @else if $h == 15{ $h : 'f'; } 
        }
        $total: #{$a}#{$s}#{$d}#{$f}#{$g}#{$h};
        .bg-random#{$i} { 
            background:#{$diez}#{$total}; 
        }
    } 
}
@include backMath(53,353,553,3353,5353,5553);
  /*
    - ne yazayım bilemedim. su tarifi veriyorum; Gerekli malzemeler 
    = su...
  */
	

    /*  
        HABUNUN İÇUNMİDU BU KADA KOD? 
        @include backMath(53,353,553,3353,5353,5553);
    */
    .bg-random0 {background: #591195; }
    .bg-random1 {background: #6a22a6; }
    .bg-random2 {background: #7b33b7; }
    .bg-random3 {background: #8c44c8; }
    .bg-random4 {background: #9d55d9; }
    .bg-random5 {background: #ae66ea; }
    .bg-random6 {background: #bf77fb; }
    .bg-random7 {background: #c0880c; }
    .bg-random8 {background: #d1991d; }
    .bg-random9 {background: #e2aa2e; }


    /*  
        NE DERSUN?
        @include backMath(53,353,553,3353,5353,5553);
    */
    <style>
        /*
            BİRAZ BAHARAT/ ÇEŞNİLİ / ÇEŞNİSİZ
        */
        .bg-random{ width: 9%; height: 8vw; float: left; margin-left: .9%; }
    </style>
    <div class="bg-random bg-random1">
    <div class="bg-random bg-random2">
    <div class="bg-random bg-random3">
    <div class="bg-random bg-random4">
    <div class="bg-random bg-random5">
    <div class="bg-random bg-random6">
    <div class="bg-random bg-random7">
    <div class="bg-random bg-random8">
    <div class="bg-random bg-random9">