Use of Flexbox and avoid justification-CodePudding

I have a problem with this flexbox. I would like to place 3 div per row. For this reason I've used flexbox. The first 3 divs are fine and have 33% width, while the divs 4 and 5 get 50%. Is there any trick to do the job? Thanks

* {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  font-size: 30px;
  text-align: center;
}

.flex-item-left {
  background-color: #f1f1f1;
  padding: 10px;
  flex: 33%;
}

.flex-item-center {
  background-color: dodgerblue;
  padding: 10px;
  flex: 33%;
}

.flex-item-right {
  background-color: red;
  padding: 10px;
  flex: 33%;
}

/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

<h1>Responsive Flexbox</h1>

<p>In this example, we change the percentage of flex to create different layouts for different screen sizes.</p>
<p><b>Resize the browser window to see that the direction changes when the 
screen size is 800px or smaller.</b></p>

<div class="flex-container">
  <div class="flex-item-left">1</div>
  <div class="flex-item-center">2</div>
  <div class="flex-item-right">3</div>
</div>

<div class="flex-container">
  <div class="flex-item-left">4</div>
  <div class="flex-item-center">5</div>
</div>

CodePudding user response：

flex: 33% is short for flex: 1 1 33% meaning that the container will grow or shrink if needed with a basis of 33%. Since there is space left, the containers will grow to 50%.

To fix this, replace the flex property with 0 1 33% meaning that it cannot grow and will not be larger than 33%.

CodePudding user response：

You can simplify with display: grid; and it will give you a little more control over your layout.

* {
      box-sizing: border-box;
    }

    .row-1 {
      grid-column: 1 / -1;
      grid-gap: 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      flex-direction: column;
      text-align: center;

    }
 
    .row-2 {
      grid-column: 1 / -1;
      grid-gap: 0;
      display: grid;
      grid-template-columns: repeat(2, 50%);
      flex-direction: column;
      text-align: center;

    }

    .flex-container {
      display: flex;
      flex-wrap: wrap;
      font-size: 30px;
      text-align: center;
    }

    .flex-item-left {
      background-color: #f1f1f1;
      padding: 10px;
    }

    .flex-item-center {
      background-color: dodgerblue;
      padding: 10px;
    }

    .flex-item-right {
      background-color: red;
      padding: 10px;
    }

    /* Responsive layout - makes a one column-layout instead of a two-column layout */
    @media (max-width: 800px) {

      .row-1, .row-2 {
        display: flex;
        flex-direction: column;
      }
    }

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />

</head>

<body>
  <h1>Responsive Flexbox</h1>

  <p>In this example, we change the percentage of flex to create different layouts for different screen sizes.</p>
  <p><b>Resize the browser window to see that the direction changes when the
      screen size is 800px or smaller.</b></p>

  <div class="row-1">
    <div class="flex-item-left">1</div>
    <div class="flex-item-center">2</div>
    <div class="flex-item-right">3</div>
  </div>

  <div class="row-2">
    <div class="flex-item-left">4</div>
    <div class="flex-item-center">5</div>
  </div>
</body>

</html>