[Resolved] Moving to flex

Home Forums Support Moving to flex

  • This topic has 5 replies, 2 voices, and was last updated 4 months ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1507425
    David

    Hello

    I’m looking to move over to flexbox – would you guys recommend I add something like this, to help with layouts?

    http://flexboxgrid.com/

    Thanks
    Dave

    #1507534
    David
    Staff
    Customer Support

    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.

    #1507558
    David

    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/

    #1507641
    David
    Staff
    Customer Support

    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.

    #1507657
    David

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

    #1507737
    David
    Staff
    Customer Support

    You’re welcome.
    Be great to hear your feedback

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.