Search code examples
htmlcssflexboxcentering

justify-content to center using Flex Box

I'm trying to align my div to the center of the page but I can't figure how to do it using the justify option.

this is how it looks like now: how it looks like now

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;

}



....

Appreciate any help :)

Solution

  • When you're in flex-direction: column, the main axis switches to vertical alignment, and justify-content works up/down, not left/right.

    Use align-items to center horizontally when in flex-direction: column.

    More details here: In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?