Aligning items in flex

Aligning items in flex
0

#1

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


#2

Use margin:auto. Set justify-content to center, then use margin-right: auto for both the item you want on the far left and the last item in the flex container. This will add space between the leftmost item in the container and the other items, and ensure the remaining items sit centrally.

Example: