CSS Flexbox justify-content container moves down

user_3066664 0
Viewed 401

I have some boxes that use inline-flex to center their content. The boxes have two lines of content, but some will have three. The boxes have an explicit width and height. When justify-content: center is applied, the boxes with three lines of content seem to have their entire container moved down, and I can't figure out why:

enter image description here

Here is a pen: https://codepen.io/jkies00/pen/XWXOzQo?editors=1100

How do I get these boxes to line up?

Thanks!

@import url("https://fonts.googleapis.com/css?family=Oxygen:300,400");
.box {
  align-items: center;
  background-color: cadetblue;
  color: white;
  display: inline-flex;
  flex-direction: column;
  height: 200px;
  justify-content: center;
  width: 200px;
  vertical-align: top;
}

.box .number {
  font-size: 30px;
}

.box .label {
  font-size: 20px;
}

body {
  background-color: whitesmoke;
  box-sizing: border-box;
  font-family: "Oxygen", sans-serif;
  padding: 1rem;
}

h1 {
  color: #00b9f1;
  font-family: "Oxygen", sans-serif;
  font-size: 2rem;
  font-weight: 100;
  margin: 0;
  text-shadow: 1px 1px 2px white;
  text-transform: uppercase;
}
<h1>Flexbox Justify Content Center</h1><br>
<div class="box">
  <div class="number">1000</div>
  <div class="label">Things</div>
</div>
<div class="box">
  <div class="number">1000</div>
  <div class="label">Things</div>
  <div class="label">Things</div>
</div>
<div class="box">
  <div class="number">1000</div>
  <div class="label">Things</div>
</div>

flexbox css
1 Answers

Since you're using inline-flex, you're triggering vertical-align: baseline.

This default setting will align the text on the same horizontal axis.

Notice that the "1000" and first "Things" align across boxes, whether in the original justify-content: flex-start, or your modified center, or even flex-end.

The baseline effect forces the fixed-size boxes to shift vertically.

Just override the default. Add vertical-align: bottom to .box.

user_35972760
Related