A more in depth responsive wrapping layout with CSS Flex

In this example I will show you how to create a more in depth wrapping layout using CSS Flexbox.

The way the code below works is that it has a two column layout. The first column will increase or decrease to fill the allocated space inside a 1200px box including the fixed width of the second column (sidebar). If the width of the first column is smaller then 280px, the columns will wrap.

For the example, see:

http://jpmalloy.com/flex.html

 The flexbox code:

    .first-column {
        display: flex;
        flex-direction: column;
        flex: 2;
        min-width: 280px;
        background-color: pink;
        box-sizing: border-box;
        padding: 20px;
    }
    .second-column {
        display: flex;
        flex-direction: column;
        flex: 1;
        flex-basis: max-content;
        max-width: 280px;
        min-width: 280px;
        background-color: hotpink;
        box-sizing: border-box;
        padding: 20px;
    }
    .container {
        display: flex;
        justify-content: space-between;
        flex-flow: wrap;
        align-items: normal;
        column-gap: 20px;
        max-width: 1200px;
        margin: 0 auto;
        row-gap: 20px;
        width: auto;
    }

Comments

Popular posts from this blog

Overlay Version 2 is here with key events and iframe support

Free Pop-up / Overlay Script

Version 3 is here... new configuration