使用 flex-box 时如何保持图标居中？ 我有一个案例，我在一个页面中有 2 个图标，在另一个页面中有 3 个图标用于反应项目

Question

我想将第二个 div 固定在中心，但是当我有 2 个 div 时，最后一个 div 会向左移动。 我正在为 div 使用 justify-content: space-between。 我知道当我有 2 个 div 而不是 3 个 div 时，它会将最后一个 div 向左推，如何始终将第二个 div 保持在同一个 position （靠近中心）中？

   <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

试试 Css container: { display: 'grid', grid: 'auto / 1fr 1fr', justifyContent: 'center', gridAutoFlow: 'column' }否则你将不得不将图标包装在一个 div 中。 将它们对齐到 flex-start 并在其中居中图标

https://jsfiddle.net/2vwjpsab/