ldc-legaulois/resources/sass/front/modules/_flexgrid.scss

/*
 * Generic grid styles
 */
.grid {
    margin: 0 auto;
    overflow: hidden;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.5em 0 -0.5em;
}
.row > * {
    box-sizing: border-box;
    padding: 0 0.5em 1em;
    flex-basis: 100%;
}
.row:last-child {
    margin-bottom: -1em;
}

.gutterless > * {
    margin: 0;
}
.gutterless > * > * {
    padding: 0;
}
.gutterless > *:last-child {
    margin-bottom: 0;
}

.col {
    flex: 1 0 auto;
}

/*
   * Default view
   */
div.col-1 {
    flex-basis: 8.3333333333%;
}

div.col-2 {
    flex-basis: 16.666666666%;
}

div.col-3 {
    flex-basis: 25%;
}

div.col-4 {
    flex-basis: 33.333333333%;
}

div.col-5 {
    flex-basis: 41.666666666%;
}

div.col-6 {
    flex-basis: 50%;
}

div.col-7 {
    flex-basis: 58.333333333%;
}

div.col-8 {
    flex-basis: 66.666666666%;
}

div.col-9 {
    flex-basis: 75%;
}

div.col-10 {
    flex-basis: 83.333333333%;
}

div.col-11 {
    flex-basis: 91.666666666%;
}

div.col-12 {
    flex-basis: 100%;
}

div.col-top {
    align-self: flex-start;
}

div.col-bottom {
    align-self: flex-end;
}

div.col-middle {
    align-self: center;
}

.row-left {
    justify-content: flex-start;
}

.row-right {
    justify-content: flex-end;
}

.row-center {
    justify-content: center;
}

.row-space-between {
    justify-content: space-between;
}

.row-space-around {
    justify-content: space-around;
}

.row-reverse {
    flex-direction: row-reverse;
}

.row-equal > * {
    display: flex;
}

.row-top {
    align-items: flex-start;
}

.row-middle {
    align-items: center;
}

.row-bottom {
    align-items: flex-end;
}

.hide {
    display: none;
}

/*
   * Small viewport (mobile)
   */
@media (max-width: 767px) {
    div.col-small-1 {
        flex-basis: 8.3333333333%;
    }

    div.col-small-2 {
        flex-basis: 16.666666666%;
    }

    div.col-small-3 {
        flex-basis: 25%;
    }

    div.col-small-4 {
        flex-basis: 33.333333333%;
    }

    div.col-small-5 {
        flex-basis: 41.666666666%;
    }

    div.col-small-6 {
        flex-basis: 50%;
    }

    div.col-small-7 {
        flex-basis: 58.333333333%;
    }

    div.col-small-8 {
        flex-basis: 66.666666666%;
    }

    div.col-small-9 {
        flex-basis: 75%;
    }

    div.col-small-10 {
        flex-basis: 83.333333333%;
    }

    div.col-small-11 {
        flex-basis: 91.666666666%;
    }

    div.col-small-12 {
        flex-basis: 100%;
    }

    div.col-small-top {
        align-self: flex-start;
    }

    div.col-small-bottom {
        align-self: flex-end;
    }

    div.col-small-middle {
        align-self: center;
    }

    .row-small-left {
        justify-content: flex-start;
    }

    .row-small-right {
        justify-content: flex-end;
    }

    .row-small-center {
        justify-content: center;
    }

    .row-small-space-between {
        justify-content: space-between;
    }

    .row-small-space-around {
        justify-content: space-around;
    }

    .row-small-reverse {
        flex-direction: row-reverse;
    }

    .row-small-equal > * {
        display: flex;
    }

    .row-small-top {
        align-items: flex-start;
    }

    .row-small-middle {
        align-items: center;
    }

    .row-small-bottom {
        align-items: flex-end;
    }

    .hide-small {
        display: none;
    }
}
/*
   * Medium viewport (tablets)
   */
@media (min-width: 768px) and (max-width: 1023px) {
    div.col-medium-1 {
        flex-basis: 8.3333333333%;
    }

    div.col-medium-2 {
        flex-basis: 16.666666666%;
    }

    div.col-medium-3 {
        flex-basis: 25%;
    }

    div.col-medium-4 {
        flex-basis: 33.333333333%;
    }

    div.col-medium-5 {
        flex-basis: 41.666666666%;
    }

    div.col-medium-6 {
        flex-basis: 50%;
    }

    div.col-medium-7 {
        flex-basis: 58.333333333%;
    }

    div.col-medium-8 {
        flex-basis: 66.666666666%;
    }

    div.col-medium-9 {
        flex-basis: 75%;
    }

    div.col-medium-10 {
        flex-basis: 83.333333333%;
    }

    div.col-medium-11 {
        flex-basis: 91.666666666%;
    }

    div.col-medium-12 {
        flex-basis: 100%;
    }

    div.col-medium-top {
        align-self: flex-start;
    }

    div.col-medium-bottom {
        align-self: flex-end;
    }

    div.col-medium-middle {
        align-self: center;
    }

    .row-medium-left {
        justify-content: flex-start;
    }

    .row-medium-right {
        justify-content: flex-end;
    }

    .row-medium-center {
        justify-content: center;
    }

    .row-medium-space-between {
        justify-content: space-between;
    }

    .row-medium-space-around {
        justify-content: space-around;
    }

    .row-medium-reverse {
        flex-direction: row-reverse;
    }

    .row-medium-equal > * {
        display: flex;
    }

    .row-medium-top {
        align-items: flex-start;
    }

    .row-medium-middle {
        align-items: center;
    }

    .row-medium-bottom {
        align-items: flex-end;
    }

    .hide-medium {
        display: none;
    }
}
/*
   * Large viewport (desktop)
   */
@media (min-width: 1024px) {
    div.col-large-1 {
        flex-basis: 8.3333333333%;
    }

    div.col-large-2 {
        flex-basis: 16.666666666%;
    }

    div.col-large-3 {
        flex-basis: 25%;
    }

    div.col-large-4 {
        flex-basis: 33.333333333%;
    }

    div.col-large-5 {
        flex-basis: 41.666666666%;
    }

    div.col-large-6 {
        flex-basis: 50%;
    }

    div.col-large-7 {
        flex-basis: 58.333333333%;
    }

    div.col-large-8 {
        flex-basis: 66.666666666%;
    }

    div.col-large-9 {
        flex-basis: 75%;
    }

    div.col-large-10 {
        flex-basis: 83.333333333%;
    }

    div.col-large-11 {
        flex-basis: 91.666666666%;
    }

    div.col-large-12 {
        flex-basis: 100%;
    }

    div.col-large-top {
        align-self: flex-start;
    }

    div.col-large-bottom {
        align-self: flex-end;
    }

    div.col-large-middle {
        align-self: center;
    }

    .row-large-left {
        justify-content: flex-start;
    }

    .row-large-right {
        justify-content: flex-end;
    }

    .row-large-center {
        justify-content: center;
    }

    .row-large-space-between {
        justify-content: space-between;
    }

    .row-large-space-around {
        justify-content: space-around;
    }

    .row-large-reverse {
        flex-direction: row-reverse;
    }

    .row-large-equal > * {
        display: flex;
    }

    .row-large-top {
        align-items: flex-start;
    }

    .row-large-middle {
        align-items: center;
    }

    .row-large-bottom {
        align-items: flex-end;
    }

    .hide-large {
        display: none;
    }
}