выровнять контент по центру с помощью Flex Box

Question

Я пытаюсь выровнять свой div по центру страницы, но я не могу понять, как это сделать, используя опцию justify.

Вот как это выглядит сейчас:

html:

<div class="flex-container">

  <div class="box" *ngFor='let movie of moviesArray;let i=index'>
    ....
  </div>

</div>

css:

.flex-container{
    display: flex;
    background-color: white;
    flex-flow: column;
    flex-wrap: wrap;
    margin:0 auto;

}

.box{
    width:80%;
    flex: 0 0 100px;
    background-color:#f4f4f4;
    margin:10px 0;
    padding:20px;

}



....

Благодарим за любую помощь:)

Answer 1

.flex-container{
    display: flex;
    background-color: white;
    flex-flow: column;
    flex-wrap: wrap;
    margin:0 auto;

}

.box{
    display: flex;
    align-items: center;
    justify-content: center;
    width:80%;
    flex: 0 0 100px;
    background-color:#f4f4f4;
    margin:10px 0;
    padding:20px;

}

<div class="flex-container">

  <div class="box" *ngFor='let movie of moviesArray;let i=index'>
    ..................
  </div>

</div>

Answer 2

Когда вы находитесь в flex-direction: column, главная ось переключается на вертикальное выравнивание, и justify-content работает вверх / вниз, а не влево / вправо.

Используйте align-items для центрирования по горизонтали, когда в flex-direction: column.

Подробнее здесь: Почему в CSS Flexbox отсутствуют свойства "justify-items" и "justify-self"?