1

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 :)

Michael Benjamin
  • 307,417
  • 93
  • 525
  • 644
hindi1991
  • 653
  • 3
  • 18
  • 30

2 Answers2

1

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?

Michael Benjamin
  • 307,417
  • 93
  • 525
  • 644
0

.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>
Asiya Fatima
  • 1,308
  • 1
  • 8
  • 20
  • add box class to display: flex ,justify-content for centering horizontally, and align-items for centering vertically – Asiya Fatima Oct 07 '18 at 16:21