Центр div в flexbox

Question

Я использую flex и пытаюсь чего-то достичь.В коде показано 5 делений.В min-width: 768px я хочу, чтобы четвертый и пятый делители были в центре.Может кто-нибудь мне помочь?Вот код:

css

.row{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  }
  .col {
  position: relative;
  width: 100%;
  border:1px solid black;
  }
  @media  (min-width:576px){
    .col {
      -ms-flex: 0 0 33%;
      flex: 0 0 33%;
      max-width: 33%;
    }
  }
  @media (min-width: 768px){
    .col {
      -ms-flex: 0 0 19%;
      flex: 0 0 19%;
      max-width: 19%;
    }
  }

html

 <div class="row">
  <div class="col"><p>first</p>  </div>
  <div class="col"><p>second</p>  </div>
  <div class="col"><p>third</p>  </div>
  <div class="col"><p>fourth</p>  </div>
  <div class="col"><p>fifth</p>  </div>  
</div>

Answer 1

вот ваш код, я его исправил.вы просто работаете с немного CSS

 .row{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
   justify-content: center;
  }
  .col {
  position: relative;
  width: 100%;
  border:1px solid black;
  }
  @media  (min-width:576px){
      .col {
      -ms-flex: 0 0 19%;
      flex: 0 0 19%;
      max-width: 19%;
    }
  }
  @media (min-width: 768px){


    .col {
      -ms-flex: 0 0 33%;
      flex: 0 0 33%;
      max-width: 33%;
    }
  }




 <div class="row">
  <div class="col"><p>first</p>  </div>
  <div class="col"><p>second</p>  </div>
  <div class="col"><p>third</p>  </div>
  <div class="col"><p>fourth</p>  </div>
  <div class="col"><p>fifth</p>  </div>  
</div>

Answer 2

Вы можете попробовать это в своем медиа-запросе:

  @media (min-width: 768px){
    .col {
      -ms-flex: 0 0 19%;
      flex: 0 0 19%;
      max-width: 19%;
    }

    .col:nth-child(4),
    .col:nth-child(5){
      text-align: center;
    }
  }