html - 将一组弹性项目居中并在换行时将它们左对齐

Question

我正在尝试将一组弹性项目居中，然后将它们左对齐。这意味着我不能使用justify-content: center; 或justify-content: space-between;

问题的图像

正如您在图像中看到的，元素没有居中。

这是我的代码：

HTML

<div class="container transp" style=" padding:2%">

    <div class="grid">
        <div class="cell">
            <a class="grid-item">
                <img src="http://www.nafpaktia.com/data/wallpapers/34/839687.png" >
            </a>
        </div>

         <div class="cell">
            <a class="grid-item">
                <img src="http://www.nafpaktia.com/data/wallpapers/34/839687.png" >
            </a>
        </div>

         <div class="cell">
            <a class="grid-item">
                <img src="http://www.nafpaktia.com/data/wallpapers/34/839687.png" >
            </a>
        </div>

         <div class="cell">
            <a class="grid-item">
                <img src="http://www.nafpaktia.com/data/wallpapers/34/839687.png" >
            </a>
        </div>

         <div class="cell">
            <a class="grid-item">
                <img src="http://www.nafpaktia.com/data/wallpapers/34/839687.png" >
            </a>
        </div>

         <div class="cell">
            <a class="grid-item">
                <img src="http://www.nafpaktia.com/data/wallpapers/34/839687.png" >
            </a>
        </div>

         <div class="cell">
            <a class="grid-item">
                <img src="http://www.nafpaktia.com/data/wallpapers/34/839687.png" >
            </a>
        </div>

         <div class="cell">
            <a class="grid-item">
                <img src="http://www.nafpaktia.com/data/wallpapers/34/839687.png" >
            </a>
        </div>

         <div class="cell">
            <a class="grid-item">
                <img src="http://www.nafpaktia.com/data/wallpapers/34/839687.png" >
            </a>
        </div>

    </div>




</div>

CSS

body{
box-sizing: border-box;
margin: 0;
}
.grid{

background-color:red;
}

.container {
  margin: auto;
  max-width: 1200px;
}
.cell{
  margin:0.5rem;
}

cell a{
display:block;
}
cell a img{
display:block;
}

@media screen and (min-width: 600px) {
  .grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;

  }
  .cell {
    width: 30%;
  }
}

@media screen and (min-width: 1000px) {
  .cell {
    width: calc(100% / 6);
  }
}
img{
width:100%;
}

注意@media screen 和 (min-width: 600px) 的部分，因为这是我使用柔性显示的部分。

标签： htmlcssflexboxcentering