In my React.js im using conditional rendering to display or not display some elements.
The problem I'm having is that since my Main element is a flexbox all elements move when new element is rendered.
Example image from my project:
MainElement
On the link, there are two pictures, 1st picture is when button is toggled to 'Learn' mode, and 2nd picture is image on 'Normal' mode.
On the bottom of the picture we can see that rendering the 'Record:' element shifts all middle elements upwards (since the CSS justify-content of flexbox is set to 'space-between').
main.css:
main {
font-family: 'Inter', sans-serif;
font-family: 'Libre Baskerville', serif;
margin: 75px auto;
background-color: #29416E;
border: 3px solid #D9C241;
height: 650px;
width: 1100px;
max-width: 1300px;
border-radius: 5px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
Main.js:
<div>
<h3> {points} points / {mistakes} mistakes</h3>
{normalMode && <h4 className='main--textCenter'>Record: {pointsRecord ? pointsRecord : 0}</h4>}
</div>
The goal I'm trying to achieve is that when rendering new elements, elements stay on the same spot, and the conditional element pops up in its designated place without moving any other elements.
Question I'm having is how to solve this issue? Should I avoid flex when conditional rendering, or is there a way to bypass this by rendering empty placeholder objects?
