centrujące zawartość poziomie za pomocą schematu flexbox

Question

mam trudności z centrum poziomo pewne treści w moim pojemniku:

https://jsfiddle.net/y56t31q9/6/

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 600px; 
 
    background-color: blue; 
 
    justify-content: center; 
 
    /* Not centering content horizontally? */ 
 
} 
 
.item { 
 
    max-width: 500px; 
 
    height: 100px; 
 
    background-color: yellow; 
 
    border: 2px solid red; 
 
}

<div class="container"> 
 
    <div class="item"></div> 
 
    <section class="item"></section> 
 
    <section class="item"></section> 
 
    <footer class="item"></footer> 
 
</div>

myślałem uzasadniać-zawartość musiałyby załatwił sprawę, ale bezskutecznie.

Każda pomoc byłaby bardzo ceniona Dzięki!

Answer 1

Obiekt justify-content:center wyrównuje Flex przedmiotów wzdłuż elastycznego kierunku - stosowanie align-items:center - zobacz demo poniżej:

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 600px; 
 
    background-color: blue; 
 
    justify-content: center; 
 
    align-items:center;/*NEW*/ 
 
} 
 
.item { 
 
    max-width: 500px; 
 
    width: 250px;/*NEW*/ 
 
    height: 100px; 
 
    background-color: yellow; 
 
    border: 2px solid red; 
 
}

<div class="container"> 
 
    <div class="item"></div> 
 
    <section class="item"></section> 
 
    <section class="item"></section> 
 
    <footer class="item"></footer> 
 
</div>

Patrz: Flexbox W3C spec

Poniżej znajduje się obraz, który ma zastosowanie, gdy flex-direction jest rząd:

a. Wyrównanie osi głównej: uzasadnij-treść

b. Krzyż wyrównanie osi: align-pozycje

Gdy flex-direction jest rząd, główną oś jest pozioma, lecz gdy jest kolumna, że jest na odwrót.

Answer 2

Dodaj align-items:center;

.container { 
    display: flex; 
    flex-direction: column; 
    width: 600px; 
    background-color: blue; 
    justify-content: center; 
    align-items:center; 
} 

Answer 3

Usuń flex-direction:column i max-width:500px. Daj pewną stałą szerokość powiedz 100px i będzie działać poprawnie. Jeśli używasz flex-direction:column, użyj wartości align-items:center, aby wyśrodkować w poziomie i justify-center, jeśli jest to row.