Archived topic

Flexbox

3 replies · Started by Klaus on July 12, 2019

Viewing posts 1–4 of 4

July 12, 2019 at 2:51 pm #956308

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

July 12, 2019 at 4:27 pm #956365

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 :)

July 13, 2019 at 4:58 am #956662

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

July 13, 2019 at 8:17 am #956895

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

Let me know :)

This archived topic is closed to new replies.

Start building better websites today.