I recently started using React and ran into issues trying to align my image using CSS. Despite trying various methods like justifyContent, justifySelf, and floating right, I couldn't get the image to align on the right side of the screen without resorting to positioning. Any suggestions for an alternative approach?
Here's the code snippet I'm working with:
import React from "react";
import { makeStyles } from "@material-ui/styles";
const useStyles = makeStyles({
main: {
display: "flex",
justifyContent: "flex-end"
},
header: {
color: "white"
},
img: {
justifySelf: "flex-end"
}
});
export default function Header() {
const classes = useStyles();
return (
<div className={classes.main}>
<span className={classes.header}>Header</span>
<img
className={classes.img}
src="https://facebook.github.io/react-native/img/header_logo.png"
/>
</div>
);
}