flexbox에서 항목을 정렬하는 방법은 무엇입니까?

Question

고정 너비와 높이를 가진 자식 요소를 하나씩 flexbox에 배치하고 그 가운데에 작은 들여 쓰기를 배치하고 가운데에 배치 할 부모 요소를 가운데에 배치하지 않도록하고 싶습니다.

내 모든 시도는 중앙에있는 부모 요소를 강제하고 자식 요소가 그 (것)들의 사이에서, 실패의 중심 중지 :

여기

align-self: center; 
margin: 0 auto; 
justify-content: space-between; 

가 미리보기에 대한 link입니다. 필요한 것은 부모 요소를 가운데에 맞 춥니 다.

justify-content: center;

는 부모 DIV를 정렬하지만, 중심으로하는 (이 완전히 요소로 작성되지 않은 경우) 내가 마지막 행을 돼요.

어떻게하면됩니까? 미리 감사드립니다.

Answer 1

부모 .grid-view에 justify-content: center;을 사용하십시오.

아래의이 조각에서 보라 :

.grid-view { 
 
    display: flex; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    align-self: center; 
 
    flex-wrap: wrap; 
 
    align-items: flex-start; 
 
    justify-content: center; 
 
} 
 

 
.grid-view .item { 
 
    flex-shrink: 1; 
 
    margin: 5px; 
 
    border: 1px solid #333; 
 
    align-self: flex-start; 
 
} 
 

 
.grid-view .item .item-cover { 
 
    width: 200px; 
 
    border: 3px solid #006699; 
 
    border-radius: 3px; 
 
}

<div class="grid-view"> 
 
    <div class="item"> 
 
     <img class="item-cover" alt="attēls" src="https://pbs.twimg.com/profile_images/660946436801101824/niM7azZS.jpg" /> 
 
     <h2 class="item-title">{{Title}}</h2> 
 
     <p class="item-description">{{item description}}</p> 
 
    </div> 
 
    <div class="item"> 
 
     <img class="item-cover" alt="attēls" src="https://pbs.twimg.com/profile_images/660946436801101824/niM7azZS.jpg" /> 
 
     <h2 class="item-title">{{Title}}</h2> 
 
     <p class="item-description">{{item description}}</p> 
 
    </div> 
 
    <div class="item"> 
 
     <img class="item-cover" alt="attēls" src="https://pbs.twimg.com/profile_images/660946436801101824/niM7azZS.jpg" /> 
 
     <h2 class="item-title">{{Title}}</h2> 
 
     <p class="item-description">{{item description}}</p> 
 
    </div> 
 
    <div class="item"> 
 
     <img class="item-cover" alt="attēls" src="https://pbs.twimg.com/profile_images/660946436801101824/niM7azZS.jpg" /> 
 
     <h2 class="item-title">{{Title}}</h2> 
 
     <p class="item-description">{{item description}}</p> 
 
    </div> 
 
    <div class="item"> 
 
     <img class="item-cover" alt="attēls" src="https://pbs.twimg.com/profile_images/660946436801101824/niM7azZS.jpg" /> 
 
     <h2 class="item-title">{{Title}}</h2> 
 
     <p class="item-description">{{item description}}</p> 
 
    </div> 
 
    <div class="item"> 
 
     <img class="item-cover" alt="attēls" src="https://pbs.twimg.com/profile_images/660946436801101824/niM7azZS.jpg" /> 
 
     <h2 class="item-title">{{Title}}</h2> 
 
     <p class="item-description">{{item description}}</p> 
 
    </div> 
 
    <div class="item"> 
 
     <img class="item-cover" alt="attēls" src="https://pbs.twimg.com/profile_images/660946436801101824/niM7azZS.jpg" /> 
 
     <h2 class="item-title">{{Title}}</h2> 
 
     <p class="item-description">{{item description}}</p> 
 
    </div> 
 
    <div class="item"> 
 
     <img class="item-cover" alt="attēls" src="https://pbs.twimg.com/profile_images/660946436801101824/niM7azZS.jpg" /> 
 
     <h2 class="item-title">{{Title}}</h2> 
 
     <p class="item-description">{{item description}}</p> 
 
    </div> 
 
</div>

희망이 도움이!