justify-content to center с помощью Flex Box

Я пытаюсь выровнять свой 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;

}



....

Цените любую помощь :)

Всего 2 ответа


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

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

Подробнее здесь: В CSS Flexbox, почему нет свойств «justify-items» и «justify-self»?


 .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>