vertical-align property not working in flexbox - html

Question

I want to display a calculation with exponents (and more). To set the elements in line i use flexbox. Within the flexbox element i want to make use of the vertical-align CSS property. But the vertical-align property doesn't work.
I tested it with different approaches and in the end one solution worked. But then the justify-content property is not working anymore. in my attempt i used for the property: flex the webkit version: -webkit-box.
Here is the snipped in a fiddle if you want to test it: https://jsfiddle.net/oe3hxfma/
.calculation {
display: flex;
justify-content: center;
font-size: 1.3em;
}
.exponent {
display: inline;
vertical-align: super;
}
.calculationTwo {
display: -webkit-box;
justify-content: center;
font-size: 1.3em;
}
<div class="calculation">
3
<div class="exponent">
2
</div>
</div>
<div class="calculationTwo">
3
<div class="exponent">
2
</div>
</div>
How can i make use of the vertical-align when the parent elmenet is displayed as flexbox.

Answer 1

The vertical-align property works only with inline-level and table-cell elements (MDN).
Because the exponent element is a child of a flex container, it is automatically blockified (spec). This means it computes to a block-level element and vertical-align is ignored.
It doesn't matter how you define the display value for the flex item (e.g., in your code you have the flex item set to display: inline). In a flex formatting context, the display value of flex items is controlled by the flex algorithm.
The key to using vertical-align is to remove it from a flex formatting context. Create an element that is a child of the flex item. Now the exponent value is outside the scope of flex layout, and you can set it to display: inline.
Also, because the text is aligned to the top of the container, there is no space for vertical-align: super to work. So align the text to the center or bottom of the container.
Add align-items: flex-end or center (depending on how much superscripting you want).
.calculation {
display: flex;
justify-content: center;
align-items: flex-end;
font-size: 1.3em;
}
span {
vertical-align: super;
}
<div class="calculation">
3
<div class="exponent">
<span>2</span>
</div>
</div>

Answer 2

You should use "align-items" property to align items in vertical position:
.container {
align-items: stretch | flex-start | flex-end | center | baseline;
}
stretch: fit in the container,
flex-start: align item vertically upward,
flex-end: align items vertically downward,
center: align items to vertically center,
baseline: items are aligned such as their baselines align

Answer 3

just a suggestion, why don't you try to use sup HTML Tag for exponential?
<div>
3 <sup>2</sup>
</div>
and for vertical alignment, display:flex use align-items like in above answers.
div
{
display: flex;
justify-content: center;
}
<div>
3 <sup>2</sup>
</div>
.calculation {
display: flex;
justify-content: center;
align-items: flex-end;
font-size: 1.3em;
}
span {
vertical-align: super;
}
<div class="calculation">
3
<div class="exponent">
<span>2</span>
</div>
</div>

Answer 4

You could try give the content some padding and use the align-items: stretch feature of flex.
Here is a very useful guide to flex! It's awesome to keep it in your back-pocket as a front end developer!
Flexbox Guide!