使用 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-direction: column 中时，主轴切换到垂直对齐，justify-content 向上/向下工作，而不是向左/向右工作。

在flex-direction: column 中使用align-items 水平居中。

更多详情：In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Answer 2

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