Skip to main content

Flex box layout

info

You can choose Grid layout also instead using Flexbox.

For 2 columns layout​

You can use justify-content: between;.

For 3 or more columns layout​

But, if you use justify-content: between; for 3 or more columns layout. Sometimes layout will be weired like the following:

BLANK

Solution​

You can resolve flex box layout with negative margin for parent box.

.c-flex {
    // Add negative margin half of gap size to horizontaly
    margin: 0 -15px;

    &__col {
        height: 140px;
        background: #999;

        // Add margin half of gap size to horizontaly
        margin: 0 15px;

        // 100% divided by the number of column size and subtracted by gap size
        width: calc(100% / 3 - 30px);

        &:nth-child(n+4) {
            margin-top: 30px;
        }
    }
}