Question 269829 in Html Question posted in
Some basic documentation can be found here.

Html – How to align items equally using flexbox

im new to html and css and ive made some toggle buttons that im trying to dynamically align to the center of the screen.

I found this thing called flexbox which seems to make doing this rather easy however, my only issue is that when the window that my html file is loaded on becomes narrower, the buttons separate unevenly and im not a big fan of this aesthetically.

example of the issue

does anyone know how to either utilise flexbox to make it so that the buttons will always have an even amount on top and bottom (i.e. only ever one row of 8, two rows of 4, four rows of 2 etc)

otherwise if someone can tell me how to do this without flexbox? just using html+css that would be much appreciated.

thank you

i tried using flexbox my code is as follows:

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

it looks great on full-size wide screens but not great on medium screens when there are 6 on top and 2 on bottom for example

Tags:

2

Answers


  1. 0

    check this hopefully it is helpful foryou if you like this answer you can accept if you have another issue please comment.

     .center {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        .button {
            width: 100px; /* Set your button width */
            height: 40px; /* Set your button height */
            margin: 10px; /* Adjust margin as needed for spacing */
        }

        @media (max-width: 600px) {
            .center {
                flex-direction: column;
                align-items: center;
            }
        }
    <div class="center">
        <button class="button">Button 1</button>
        <button class="button">Button 2</button>
        <button class="button">Button 3</button>
        <button class="button">Button 4</button>
        <button class="button">Button 5</button>
        <button class="button">Button 6</button>
        <button class="button">Button 7</button>
        <button class="button">Button 8</button>
    </div>
    Login or Signup to reply.
  2. 0

    There’s an article by Temani Afif that provides a nice solution to this — using CSS Grid without media queries — which I’ve adapted for your situation below:

    .container {
  /* first breakpoint*/
--w1:900px;
--n:8;
/* second breakpoint*/
--w2:500px;
--m:4;
/* third  breakpoint*/
--w3:300px;
--p:2;

display:grid;
grid-template-columns:
  repeat(auto-fill,
    minmax(clamp(clamp(clamp(  
      100%/(var(--n) + 1) + 0.1%,
        (var(--w1) - 100vw)*1000,
      100%/(var(--m) + 1) + 0.1%), 
        (var(--w2) - 100vw)*1000,
      100%/(var(--p) + 1) + 0.1%), 
        (var(--w3) - 100vw)*1000,
      100%), 1fr));
gap:10px;
}
    <div class="container">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button 4</button>
  <button>Button 5</button>
  <button>Button 6</button>
  <button>Button 7</button>
  <button>Button 8</button>
</div>

    You could use media queries instead if you find that easier, although this is a very cool method. You can adjust the breakpoints in the code above to taste. But Grid is a better option here than Flexbox, however you approach it. (And there are other solutions without either + media queries, but these newer layout options are nicer to use.)

    In the demo above, you could also hardcode all those variables if you prefer, but I’ve left them as provided in the article for now.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search