I'm struggling to understand how to effectively utilize Material UI's flexbox integration. I want to align items in a specific way, like this:
export default function Home() {
return (
<Grid container justify={"space-between"}>
<Grid item>
<Typography>Left text</Typography>
</Grid>
<Grid item>
<Typography>Right text</Typography>
</Grid>
</Grid>
);
}
However, I thought this alternative approach should also achieve the same result:
export default function Home() {
return (
<Grid container>
<Grid item xs={6} justify={"flex-start"}>
<Typography>Left text</Typography>
</Grid>
<Grid item xs={6} justify={"flex-end"}>
<Typography>Right text</Typography>
</Grid>
</Grid>
);
}
Unfortunately, the latter method does not produce the expected outcome. Can someone help me figure out what I'm doing wrong?