Search code examples
csslayoutflexbox

Need help on flexbox positioning

i kinda need help with the positioning of flexbox in a certain way, i know how to do the very basics, but i have no clue on how i can make them in a certain order and position

I already have the basics, but i want to have a flexbox where i have 6 buttons on each site of the screen, and another 6 below them, also on each site, like in the screenshot below (behold my mad graphic skills)

It doesn't need to be my code, so i hope its not bad if i didn't post any, i just would like if someone could explain me how i would get this flexbox layout to work, or if someone even could give me an example, that be really great. Thanks in advance!

flexbox

Solution

  • First did you used the [documentation of flexbox][1] ?

    Then you need to use for everything

    .style {
  display:flex;
  flex-direction:row;
  justify-content:space-between;
}

    Then you nest all your buttons in several themselves nested

    For exemple for one button groupe :

    <div class="style"> 
    <div class="style">
        <button></button>
        <button></button>
        <button></button>
    </div>
    <div class="style">
        <button></button>
        <button></button>
        <button></button>
    </div>
</div>

    And then you apply that on the rest [1]: https://css-tricks.com/snippets/css/a-guide-to-flexbox/