CODEWITHSUNDEEP
htmlcssflexboxcentering
rio
rio

Reputation: 807

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

Upvotes: 1

Views: 733

Answers (2)

Asiya Fatima
Asiya Fatima

Reputation: 1438

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

Upvotes: 0

Michael Benjamin
Michael Benjamin

Reputation: 370993

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?

Upvotes: 1

Related Questions