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
  • 346,931
  • 104
  • 581
  • 701
rio
  • 757
  • 5
  • 19
  • 32

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
  • 346,931
  • 104
  • 581
  • 701
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,388
  • 1
  • 10
  • 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