CODEWITHSUNDEEP
cssflexbox
nolion
nolion

Reputation: 13

Flexbox horizontally centered fixed-width rows in column

How can I center my fixed width rows horizontally within a column oriented flexbox? justify-content: center; sounds like it should do the trick but it doesn't seem to work. Minimal example in a fiddle: http://jsfiddle.net/ngr06e8w/

Upvotes: 1

Views: 505

Answers (2)

Anupam Basak
Anupam Basak

Reputation: 1523

Just add align-items: center; in the css of .col

Here's the updated Fiddle: http://jsfiddle.net/ngr06e8w/1/

Upvotes: 2

Vipin Raunchhela
Vipin Raunchhela

Reputation: 193

You have to use .col{margin:0 auto;} insted of justify-content: center; and you are done. 

.col {
  display: flex;
  flex-direction: column;
  width: 500px;
  padding: 15px;
  background: #ccc;
    margin:0 auto;
}
.row1 {
  height: 300px;
  width: 500px;
  background: red;
}
.row2 {
  height: 300px;
  width: 300px;
  background: blue;
}
<div class="col">
  <div class="row1">
  </div>
  <div class="row2">
  </div>
</div>

Upvotes: 0

Related Questions