플렉스 컨테이너에서 div의 그리드를 중앙 정렬하는 방법은 무엇입니까?

Question

flex-containerdiv에 배치 된 3 열 그리드 (6 으로 구성)를 가운데 정렬하려고합니다. (이미지 참조)

많은 변형이 float과 align-content입니다. 또한 플렉스 항목을 하위 컨테이너에 배치하려고했지만 작동하지 못했습니다.

이 내가 현재 가지고있는 것입니다 :

.flex-container { 
 
    flex-direction: row; 
 
    display: -webkit-flex; 
 
    display: inline-flex; 
 
    background-color: #f5f7f9; 
 
    width: 100%; 
 
    align-content: center; 
 
    flex-flow: row wrap; 
 
    margin-top: 100px; 
 
} 
 
.flex-item { 
 
    width: 23%; 
 
    height: 360px; 
 
    margin: 10px; 
 
    order: 1; 
 
    border-radius: 3px; 
 
    padding: 0 10px 40px 10px; 
 
} 
 
.colour-1 { 
 
    background-color: #8c72cb; 
 
} 
 
.colour-2 { 
 
    background-color: #54c7ec; 
 
} 
 
.colour-3 { 
 
    background-color: #a3cedf; 
 
} 
 
.colour-4 { 
 
    background-color: #b9cad2; 
 
} 
 
.colour-5 { 
 
    background-color: #6bcebb; 
 
} 
 
.colour-6 { 
 
    background-color: #a3ce71; 
 
}

<div class="flex-container"> 
 
    <div class="flex-item colour-1"></div> 
 
    <div class="flex-item colour-2"></div> 
 
    <div class="flex-item colour-3"></div> 
 
    <div class="flex-item colour-4"></div> 
 
    <div class="flex-item colour-5"></div> 
 
    <div class="flex-item colour-6"></div> 
 
</div>

IMAGE

감사합니다.

Answer 1

플렉스 컨테이너에서 justify-content을 사용하여 항목을 주축에 정렬 할 수 있습니다. 이 예를 살펴 : https://jsfiddle.net/eL650y3e/

소스 :

• https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

나는 여백 설정을 시도 할 것

: 자동; `

.flex-item { 
    width: 23%; 
    height: 360px; 
    margin: 10px; 
    order: 1; 
    border-radius: 3px; 
    padding: 0 10px 40px 10px; 
    margin:auto; 
}`