Why does flex box not vertically and horizontally align the items within?

Question

As I understood from the documentation the justify-items would center it on the main axis and align-items would center it on the cross axis. So why is it, that the center-box is only aligned on the cross-axis (now vertical)?

By changing to flex-direction: column; it will horizontally align, but again the main axis seems to get ignored and so it will not center vertically in this case.

.flex 
{
  display: flex;
  justify-items: center; /* Does not seem to work */
  align-items: center;
}

.center-box
{
  background: green;
}

/* Flavor */
.flex 
{
  margin: 0 auto;
  width: 200px;
  height: 200px;
  background: red;
}

<div class="flex">
  <div class="center-box">Center Box</div>
</div>

There is no `justify-items` in flexbox. It's `justify-content`. — Michael Benjamin, Aug 12 '21 at 11:46

score 2 · Accepted Answer · answered Aug 12 '21 at 11:45

2

its justify-content:center; not justify-items:center;

answered Aug 12 '21 at 11:45

Shafayet

163
7

score 0 · Answer 2 · answered Aug 12 '21 at 11:42

.flex 
{
  display: flex;
  justify-content: center; 
  align-items: center;
}

.center-box
{
  background: green;
}

/* Flavor */
.flex 
{
  margin: 0 auto;
  width: 200px;
  height: 200px;
  background: red;
}

<div class="flex">
  <div class="center-box">Center Box</div>
</div>

Why does flex box not vertically and horizontally align the items within?

2 Answers2