[Support request] Flexbox

[Klaus]

Hello, I would like to create a flexbox with three columns (to replace the Lightweight Grid Column Plugin). I want it to look pretty also on mobile (like three columns on desktop, two columns on tablet and one column on a smartphone). Would you have some css – or advice – for me to do that? Klaus

[Tom]

Hi there,

This article is great: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

The idea is simple:

<div class="flex-container">
    <div class="flex-item">

    </div>

    <div class="flex-item">

    </div>

    <div class="flex-item">

    </div>
</div>

CSS:

.flex-container {
    display: flex;
}

.flex-item {
    width: 33.333%;
}

@media (max-width: 1024px) {
    .flex-item {
        width: 50%;
    }
}

@media (max-width: 768px) {
    .flex-item {
        width: 100%;
    }
}

Hope this helps get you started 🙂

[Klaus]

Thanks a lot, but: hm, the CSS doesn’t work. (Do you know why? Is it GP related?)

Out of your code I have done this:

.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}

img.scaled {
width: 100%;
}

.flex-item {
flex-basis: 30%;
}

@media (max-width: 1024px) {
.flex-item {
flex-basis: 46.5%;
}
}

@media (max-width: 768px) {
.flex-item {
flex-basis: 100%;
}
}

Thanks for putting me on the right track. You can see the result here https://honigwerk.de

[Tom]

What about it isn’t working? I’m seeing columns on that page using Flexbox.

Let me know 🙂

[Author]

Posts