Flexbox align-content and justify-content not working

Question

I set specific widths and I don't have margin: auto on my flex items, but for some reason these properties are not working as expected.

I just want spacing between the headbox and the list classes.

Now on my com the headbox is centered but on the snippet is not, and I am not sure why, even though justify-content is set to center.

But even on my computer align-items is not working as it should.

I mean I know it has no effect but that's just if there's only one item.

I've also commented out some of the usual suspects but that isn't working.

Lastly, right is actually a part of a bigger container div but that should be irrelevant. If you do a fullpage for the snippet you'll see what I am talking about.

.right {
  display: flex;
  position: relative;
  flex-flow: row wrap;
  align-items: space-between;
  justify-content: center;
  // text-align: center;
  order: 3;
  //background: yellow;
  flex: 1 50%;
  height: 100%;
}
div.list {
  display: flex;
  flex-flow: row wrap;
  width: 70%;
  justify-content: center;
  line-height: 300%;
  border: 1px solid pink;
}
.right .headbox {
  border-bottom: 1px solid orange;
  width: 70%;
  height: auto;
}
.right .list {
  // text-align: center;
  height: auto;
}
.list ul {
  list-style: none;
  padding: 0;
}
.list a {
  text-decoration: none;
  color: inherit;
}

<div class="right">
  <div class="headbox">
    <h3>Visit Us</h3>
  </div>
  <div class="list">
    <ul>
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">Hours</a>
      </li>
      <li><a href="#">Plan</a>
      </li>
      <li><a href="#">Directions</a>
      </li>
    </ul>
  </div>
</div>

Answer 1

Actually, both justify-content and align-items are working fine.

You're not getting the results you want for other reasons.

---

First, keep in mind that the scope of a flex formatting context is the parent-child relationship.

This means that descendants beyond the children are not flex items and do not accept flex properties.

So, whenever you want to apply flex properties to an element, make sure the parent is a flex container (display: flex or display: inline-flex).

Your .right flex container with justify-content: center has actually centered .headbox. Add a border around .right and .headbox to see this clearly.

But if you want to center the <h3> with flex properties, then also make .headbox a flex container:

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

---

Second, your layout doesn't have a defined height. It's defaulting to height: auto (the height of the content). Therefore, align-items has no space to move things around.

Add this to your code:

html, body { height: 100%; }

html, body { height: 100%; }      /* NEW */

.right {
    display: flex;
    position: relative;
    flex-flow: row wrap;
    align-items: space-between;
    justify-content: center;
    order: 3;
    flex: 1 50%;
    height: 100%;
}

div.list {
    display: flex;
    flex-flow: row wrap;
    width: 70%;
    justify-content: center;
    line-height: 300%;
    border: 1px solid pink;
}

.right .headbox {
    border-bottom: 1px solid orange;
    width: 70%;
    height: auto;
    
    display: flex;                 /* NEW */
    justify-content: center;       /* NEW */
    align-items: center;           /* NEW */
}

.right .list {
    height: auto;
}

.list ul {
    list-style: none;
    padding: 0;
}

.list a {
    text-decoration: none;
    color: inherit;
}

<div class="right">
    <div class="headbox">
        <h3>Visit Us</h3>
    </div>
    <div class="list">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Hours</a></li>
            <li><a href="#">Plan</a></li>
            <li><a href="#">Directions</a></li>
        </ul>
    </div>
</div>

jsFiddle