Can "display: inline-block" be emulated using flexbox?-CodePudding

Question: Is there any way to perfectly emulate inline-block using inline-flex and some other properties? Ideally, without changing the DOM, since in my case it is generated by MathJax and I'd prefer not having to alter its source code.

JSFiddle:

Result with display: inline-flex; align-items: baseline:

As you can see, the "7" and the "2" are shown at the wrong vertical position.

CodePudding user response：

When you make every element in a sub-tree display:inline-flex every element not at the root of that sub-tree will be a flex item and therefore blockified.

This means that those elements will be computed display:flex, and so won't be affected by the vertical-align property, which is used by MathJax to position the "7" and the "2".

So without reverse engineering MathJax in detail to see what values can be used where, I don't believe this approach is possible.

CodePudding user response：

Would a slighty more nuanced approach work?

This code looks for spans with inline-block and sets them to have a class which is display: inline-flex and align-items: baseline.

I don't have enough info to try it out on an example which fails on touch scroll so cannot say whether it will help your use case, but it does seem to allow the formula in the question to be displayed correctly.

<style>
/* remove the setting you have and replace with this */
.test  {
  display: inline-flex;
  align-items: baseline;
}
</style>

<button onclick="testinit();">
Click me to change inline-block spans to inline-flex and align-items: baseline</button>
  <div>
    \( \sqrt[7]{\log_2\left(x\right)} \)
  </div>
 <script>
  function testinit() {const spans = document.getElementsByTagName("span");
let count = 0;
for (let i = 0; i < spans.length; i  ) {
  if (window.getComputedStyle(spans[i]).display == 'inline-block') {
    spans[i].classList.add('test');
    count  ;
  }
}
alert('Number of spans changed: '   count);
}
</script>

CodePudding user response：

From what I tried, it worked only with this class:

#new .mjx-math  {
  display: inline-flex;
}