CSS Flexbox Button Layout

Issue

EDIT: Sorry. When I posted it last night, I forgot to include the code.

I have question regarding CSS Flexbox layout. You will see below both my html section and my css section. I am confused on what controls my button layout. You will see that the first four buttons are laid out in two rows and two columns. Then, buttons 5 and 6 are in one column, but two separate rows. Then, buttons 7 and 8 are one row, two columns. Then, the remainder of the buttons are all one column one row each.

an image screenshot showing the button layout

You can see the live website by visiting my GitHub Page.

My question is this: What actually controls the layout of each button? What determines if it will be in two columns or one column?

I like alternating a one column, one row button every now and again, but I would like some consistency. Originally, I was trying to get 2-3 columns when the browser window is wide and when the browser window is smaller, like on a cellphone, it reduces down to one column.

Below is my html just for context. I was testing the different gradient classes. This is why you see btn-1 repeated everywhere, but in the CSS file I have 5 different buttons. Right now, that CSS only controls the gradient.

    <div class="btn-container">
        <a class="btn btn-1" href="cafe-menu/index.html">Cafe Menu</a>
        <a class="btn btn-1" href="registration-form/index.html">Registration Form</a>
        <a class="btn btn-1" href="survey-form/index.html">Survey Form</a> 
        <a class="btn btn-1" href="rothko-painting/index.html">CSS Rothko Painting</a> 
        <a class="btn btn-1" href="css-flexbox-photo-gallery/index.html">CSS Flexbox Photo Gallery</a>
        <a class="btn btn-1" href="css-nutrition-label/index.html">CSS Typography Nutrition Label</a>
        <a class="btn btn-1" href="html-css-quiz/index.html">HTML/CSS Quiz</a>
        <a class="btn btn-1" href="tribute-page/index.html">HTML/CSS Tribute Page</a> 
        <a class="btn btn-1" href="css-balance-sheet/index.html">HTML/CSS Balance Sheet</a> 
        <a class="btn btn-1" href="http://mettrys.com/" target="_blank">Mettry's WordPress Website</a>
        <a class="btn btn-1" href="http://circlea.co/" target="_blank">Circle A WordPress Website</a>
        <a class="btn btn-1"  href="https://www.behance.net/gallery/143444635/Website-WordPress-Graphic-Design" target="_blank">Other WordPress Websites</a>
    </div>
</div> 

Here is my CSS. This is where I have questions. It has to be the flexbox in either the .btn-container class or .btn class. It isn't the flex-direction or flex-wrap, is it?

body {
    font-family: Helvetica, sans-serif;
}

/* logo */
.logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: auto;
    max-width: 336px;
}

h1, p {
    text-align: center; 
}

/* Main Content Container */
.content {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    max-width: 520px;
    color: #000000;
    text-align: center;
}

@media (max-width: 576px) {
    .content {
        width: 50%;
      }
 
  }

  @media (max-width: 768px) {
    .content {
      width: 50%;
    }

}

/* 2778x1284 pixels at 458ppi */
@media only screen 
    and (device-width: 428px) 
    and (device-height: 926px) 
    and (-webkit-device-pixel-ratio: 3) { 

    }

/* Project Navigation Links */
.nav {
    text-align: center;
}

/* infinite gradient shift on hover buttons */

.btn-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    width: 50vw;
    margin: 0 auto;
    max-width: 100%;
  }

  .btn {
    flex: 1 1 auto;
    margin: 10px;
    padding: 30px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
   /* text-shadow: 0px 0px 10px 
rgba(0,0,0,0.2);*/
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
   }

  /* <- buton css starts */

  .btn:hover {
    background-position: right center; /* 
change the direction of the change here */
  }

  .btn-1 {
    background-image: linear-gradient(to 
right, #60101D 20%, #2D2D82 50%, #60101D 
100%);
  }

  .btn-2 {
    background-image: linear-gradient(to 
right, #60101D 0%, #2D2D82 50%, #60101D 
100%);
  }

  .btn-3 {
    background-image: linear-gradient(to 
right, #60101D 0%, #2D2D82 50%, #60101D 
100%);
  }

  .btn-4 {
    background-image: linear-gradient(to 
right, #60101D 0%, #2D2D82 50%, #60101D 
100%);
  }

  .btn-5 {
    background-image: linear-gradient(to 
right, #60101D 0%, #2D2D82 50%, #60101D 
100%);
  }


  /* button css ends -> */

  a:link { text-decoration: none; }


a:visited { text-decoration: none; }


a:hover { text-decoration: none; }


a:active { text-decoration: none; }

Solution

The text inside you button controls the layout. Rename button 5 to "Photo Gallery" and button 6 to "Nutrition Label" and you'll see they'll now sit side by side.

Once the screen size becomes smaller, all buttons comes to one column because you have used flex-wrap: wrap which means if no space found, the items will be placed under.

.btn-container {
  width: 50vw; // the container will have half the width of the screen
  display: flex; // flex will make all item sit side by side by default
  flex-wrap: wrap; // flex items to sit below prior flex items if no space in that row.
}

Answered By - tahsin amin