@charset "UTF-8";
@import "mixin.scss";

.flex-container{
    @include flex-box();
}

$divColorList: red blue green;
.flex-item{
    @include flexbox;
    @include align-content(center);
    @include align-items(center);
    @include justify-content(center);
    @include flex-grow(1);
    @include flex-shrink(1);
    @include flex-basis(0);
    height: 100px;
    @each $color in $divColorList {
        $i:index( $divColorList, $color);
        &:nth-child(#{$i}){
            background-color: $color;
        }
    }
}

.transform-container{
    width: 100%;
}
.transform-item{
    width: 100px;
    height: 100px;
    background-color: #eee;
    @include transform(translateX(200px));
}