I am trying to display some labels that present some stats and am still getting used to using flexbox.
The stat
class is a container which holds an arrow icon and the stat.
I wanted to have the arrow on the far left of the container as denoted by justifyContent: "flex-start"
And I want to center the text but justifyContent: "center"
is not working.
Is it possible to have two elements within a flex container with one positioned at flex-start
and a second element be positioned center
?
<div className={classes.stat}><Arrow className={classes.arrow}/><Typography className={classes.statText}>stats</Typography></div>
<div className={classes.stat}><Arrow className={classes.arrow}/><Typography className={classes.statText}>stats</Typography></div>
<div className={classes.stat}><Arrow className={classes.arrow}/><Typography className={classes.statText}>stats</Typography></div>
stat: {
margin: "10px 20px",
display: "flex",
alignItems: "center",
},
arrow: {
justifyContent: "flex-start",
},
statText: {
justifyContent: "center",
},
I am using React and JSS which is why the html and css may look a bit unusual