How to use <math> block elements as flex items in a flex flow layout?

By default, a <math> block element will be stacked vertically in the parent element.

However, if the parent element is using the flex flow layout with the "display: flex;" CSS property, <math> block elements automatically become flex items with these main features:

• Width of each <math> block is reduced to a minimum based on number of flex items and their widths.
• Content in each <math> block is aligned to the center.
• Horizontal padding of each <math> block varies according its width.

Here is an HTML document, math-as-Block-Element-Flex-Item.html, that shows you how to use <math> block elements as flex items:

<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
<style>
p {background-color: #e7e7e7;}
p.flex {display: flex;}
math {border: 1px solid #ff4444; background-color: #ffdddd;}
</style>
</head>
<body>

<p><math> as block elements inside <p>:
<math display="block">
<munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow>
<mi>∞</mi></munderover><mi>i</mi>
<mo>=</mo><mn>1</mn><mo>+</mo><mo>…</mo>
</math>

<math display="block">
<munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow>
<mi>∞</mi></munderover><mi>i</mi>
<mo>=</mo><mn>1</mn><mo>+</mo><mn>2</mn><mo>+</mo><mn>3</mn><mo>+</mo><mo>…</mo>
<mo>=</mo><mn>1</mn><mo>+</mo><mn>2</mn><mo>+</mo><mn>3</mn>
<mo>+</mo><mn>4</mn><mo>+</mo><mn>5</mn><mo>+</mo><mn>6</mn><mo>+</mo><mo>…</mo>
<mo>=</mo><mn>1</mn><mo>+</mo><mn>2</mn><mo>+</mo><mn>3</mn>
<mo>+</mo><mn>4</mn><mo>+</mo><mn>5</mn><mo>+</mo><mn>6</mn>
<mo>+</mo><mn>7</mn><mo>+</mo><mn>8</mn><mo>+</mo><mn>9</mn><mo>+</mo><mo>…</mo>
</math>
</p> 

<p class="flex"><math> as block elements inside <p> with CSS "display: flex;":
<math display="block">
<munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow>
<mi>∞</mi></munderover><mi>i</mi>
<mo>=</mo><mn>1</mn><mo>+</mo><mo>…</mo>
</math>

<math display="block">
<munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow>
<mi>∞</mi></munderover><mi>i</mi>
<mo>=</mo><mn>1</mn><mo>+</mo><mn>2</mn><mo>+</mo><mn>3</mn><mo>+</mo><mo>…</mo>
<mo>=</mo><mn>1</mn><mo>+</mo><mn>2</mn><mo>+</mo><mn>3</mn>
<mo>+</mo><mn>4</mn><mo>+</mo><mn>5</mn><mo>+</mo><mn>6</mn><mo>+</mo><mo>…</mo>
<mo>=</mo><mn>1</mn><mo>+</mo><mn>2</mn><mo>+</mo><mn>3</mn>
<mo>+</mo><mn>4</mn><mo>+</mo><mn>5</mn><mo>+</mo><mn>6</mn>
<mo>+</mo><mn>7</mn><mo>+</mo><mn>8</mn><mo>+</mo><mn>9</mn><mo>+</mo><mo>…</mo>
</math>
</p>

<p class="flex"><math> as block elements inside separate <p> elements  
with CSS "display: flex;":
</p>

<p class="flex"><math display="block">
<munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow>
<mi>∞</mi></munderover><mi>i</mi>
<mo>=</mo><mn>1</mn><mo>+</mo><mo>…</mo>
</math>
</p>

<p class="flex"><math display="block">
<munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow>
<mi>∞</mi></munderover><mi>i</mi>
<mo>=</mo><mn>1</mn><mo>+</mo><mn>2</mn><mo>+</mo><mn>3</mn><mo>+</mo><mo>…</mo>
<mo>=</mo><mn>1</mn><mo>+</mo><mn>2</mn><mo>+</mo><mn>3</mn>
<mo>+</mo><mn>4</mn><mo>+</mo><mn>5</mn><mo>+</mo><mn>6</mn><mo>+</mo><mo>…</mo>
<mo>=</mo><mn>1</mn><mo>+</mo><mn>2</mn><mo>+</mo><mn>3</mn>
<mo>+</mo><mn>4</mn><mo>+</mo><mn>5</mn><mo>+</mo><mn>6</mn>
<mo>+</mo><mn>7</mn><mo>+</mo><mn>8</mn><mo>+</mo><mn>9</mn><mo>+</mo><mo>…</mo>
</math>
</p>

</body>
</html>

Here is how the above HTML document is rendered in Firefox:

⇒ Use MathML Elements in OBJECT Tags

⇐ Align to Left in "math" Block Element

⇑ Introduction to MathML (Mathematical Markup Language)

⇑⇑ MathML (Mathematical Markup Language)