Moving to flex

Hi there,

Are you using the Block Editor?
If so have you tried the GenerateBlocks plugin ? It will save you writing HMTL and adding CSS frameworks:

https://wordpress.org/plugins/generateblocks/

If you do need to write HTML then i personally would not use a flexbox framework. It would be better to write your own CSS specific for your needs.

Haven't looked in to generateblocks that much to be honest, does it give me flexibility when it comes to changing styles etc when scaling down to mobile?

Would you say flex is better than grid - I've hand coded this block underneath the slider on this page using grids, which wasn't to much work...

http://185.20.51.60/~holleyhextallco/

GenerateBlocks provides desktop/tablet/mobile responsive controls for all its blocks. And those controls cover all the core aspects of CSS styling eg. widths, spacing, typography.

Flex and CSS are similar in a lot of respects but both have their strengths and weaknesses. Good thing is they are not mutually exclusive, so the two CSS properties can be combined. No real benefits of either for that layout you have created.

From a development perspective, both flex and CSS Grid its worth thinking mobile first. Heres a real basic Flex example of that:

<div class="flex-row">
    <div class="flex-item-60">
        I am 60%
    </div>
    <div class="flex-item-40">
        I am 40%
    </div>
</div>

@media(min-width: 769px) {
    .flex-row {
        display: flex;
    }

    .flex-item-40 {
        flex: 0 0 40%;
    }

    .flex-item-60 {
        flex: 0 0 60%;
    }
}

So the grid only kicks in when the screen is wider than 769px. And on smaller screens the DIVs just stack by default.

Thanks David, I'll have a good look at generateblocks

You're welcome.
Be great to hear your feedback