How can I keep my icon centered while using flex-box? I have a case where I have 2 icons in 1 page and 3 icons in another for a react project

Question

I want to keep the second div fixed at the center but when I have 2 divs the last div is moving to the left. I am using justify-content: space-between for the divs. I understand it will push the last div to the left when I have 2 divs instead of 3, how can I keep the second div in the same position (close to the center) at all times?

   <div className={classes.container}>            
            {!!ls?.fields?.difficulty && ( //div 1
                <LabeledIcon
                cardType="lsCard"
                icon={ls.fields.difficulty}
                difficultyLevel={ls.fields.difficulty}>
                {l.fields.difficulty}
              </LabeledIcon>              
            )}
            {!!ls?.fields?.time && ( //div2                
              <LabeledIcon
                cardType="lsCard"
                icon="schedule"
                messageId="lsDuration"
                messageValues={ls.fields}
              />                        
            )}
            {!!ls.comment_count && ( //div3
              <LabeledIcon
                cardType="lsCard"
                icon="chat"
                messageId="lsComments"
                messageValues={ls}
              />
            )}
            </div>
          </div>

Answer 1

Try Css Gird container: { display: 'grid', grid: 'auto / 1fr 1fr', justifyContent: 'center', gridAutoFlow: 'column' } Else you will have to wrap the icon inside a div. align them to flex-start and center the icon inside them

https://jsfiddle.net/2vwjpsab/