Question 417736 in CSS Question posted in
Some basic documentation can be found here.

Css – flex-row and justify-items-center class have no effect on Firefox but works on Chrome

function App() {
  return ( 
    <div className = "flex-row justify-items-center" >
      <h1> MINIMAL LOL </h1>
    </div >
  );
}

ReactDOM.render( < App / > , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>

<div id="root"></div>

This works as intended on Chrome:
Screenshot of Chrome Browser

However this is the result on Firefox:
Screenshot of Firefox Browser

When inspected on Firefox the flex-row class is grayed out and when hovered shows a tooltip "flex-direction has no effect on this element since it’s not a flex container".

The justify-items-center is also grayed out and shows a tooltip "justify-items has no effect on this element since it’s not a grid container".

Why is there a difference between Firefox and Chrome in rendering this classes?

Tags:

2

Answers


  1. 0 
    <div className="flex flex-row justify-center items-center">Your text</div>
    Login or Signup to reply.
  2. 0

    justify-items is not implemented for block-level layouts in Firefox yet. They have a new ticket opened for this 3 weeks ago.

    justify-items:center should be working in block level layouts as mentioned in mdn and draft spec:

    In block-level layouts, it aligns the items inside their containing block on the inline axis.

    For now, you can just use text-center if that’s all you need, or else you’ll need to use it along with grid.

    <script src="https://cdn.tailwindcss.com"></script>

<div id="root">
  <div class="text-center">
    <h1> MINIMAL LOL </h1>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search