html - 在 flexbox 中居中 div

Question

我正在使用 flex，我正在努力实现一些目标。代码中显示了 5 个 div。在 min-width:768px 中，我希望第四个和第五个 div 居中。谁能帮我？这是代码:

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

您可以在媒体查询中尝试这样做:

  @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;
    }
  }