Edwarric Edwarric - 23 days ago 7
HTML Question

Centering content horizontally using flexbox

I'm struggling to center horizontally some content in my container:

https://jsfiddle.net/y56t31q9/6/



.container {
display: flex;
flex-direction: column;
width: 600px;
background-color: blue;
justify-content: center;
/* Not centering content horizontally? */
}
.item {
max-width: 500px;
height: 100px;
background-color: yellow;
border: 2px solid red;
}

<div class="container">
<div class="item"></div>
<section class="item"></section>
<section class="item"></section>
<footer class="item"></footer>
</div>





I would have thought justify-content would have done the trick, but to no avail.

Any help would be greatly appreciated
Thanks!

Answer

The property justify-content:center aligns the flex-items along the flex direction - use align-items:center- see demo below:

.container {
  display: flex;
  flex-direction: column;
  width: 600px;
  background-color: blue;
  justify-content: center;
  align-items:center;/*NEW*/
}
.item {
  max-width: 500px;
  width: 250px;/*NEW*/
  height: 100px;
  background-color: yellow;
  border: 2px solid red;
}
<div class="container">
  <div class="item"></div>
  <section class="item"></section>
  <section class="item"></section>
  <footer class="item"></footer>
</div>

Refer: Flexbox W3C spec

Below is an image that applies when flex-direction is row:

image

a. Main axis alignment : justify-content

b. Cross axis alignment : align-items

When the flex-direction is row, the main-axis is horizontal but when it is column, it is the other way around.