Flexbox styling not applying to elements

Question

No matter how I style an element, none of the Flexbox styles I apply work. I have searched everywhere for a solution but could not find any (apologies if this is a duplicate as I could not find an answer to the problem).

I have created a CodePen here.

* {
  padding: 0;
  margin: 0;
}

.test {
  height: 10em;
  width: 10em;
  background: #333;
}

.test2 {
  height: 2.5em;
  width: 2.5em;
  background: #ff0000;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  text-align: center;
}

<div class="test">
  <div class="test2">
  </div>
</div>

Answer 1

You need to add those CSS rules to the parent element instead.

When you set display: flex on an element, its direct children elements become flexbox items. In your example, the .test2 elements didn't have any children elements, so I assume you were probably wanting to add display: flex on the parent element instead.

.test {
  height: 10em;
  width: 10em;
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}
.test2 {
  height: 2.5em;
  width: 2.5em;
  background: #ff0000;
}

<div class="test">
  <div class="test2"></div>
</div>