How do I get img to align at flex-end?

Question

I'm new to react so when I tried aligning my image the CSS way it failed. The only way I can get the image to align to the right side of the screen is by positioning it. Any alternatives?

I tried doing jjustifyContent ,justifySelf and even floating to right. Nothing works.

Image to my app

My code:

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>
);
}

Answer 1

You can use this, justify-content: space-between

Your style should be,

const useStyles = makeStyles({
  main: {
   display: "flex",
   justifyContent: "space-between"
  },
  header: {
   color: "white"
  }
});

Answer 2

 * { margin: 0; padding: 0; box-sizing: border-box; } .grid-container { display: flex; } 

 <section> <div class="grid-container"> <div style="width: 50%;"> <img width="20%" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRHGbRmrMlg4j7xLGAEp1GLJ-oeq3-1C7rkXPm8uhu5cq1vx1n8" alt=""> </div> <div style="width: 50%;"> <img width="20%" style="float: right;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRHGbRmrMlg4j7xLGAEp1GLJ-oeq3-1C7rkXPm8uhu5cq1vx1n8" alt=""> </div> </div> </section> 

Try this if that works for you!

Answer 3

you just have to make image `margin-left:auto;` please check attached example.

 .main{ background: black; display: flex; align-items: center; } span{ color: #fff; } img{ margin-left: auto; } 

 <div class="main"> <span class="header">Header</span> <img class="main-image" src="https://facebook.github.io/react-native/img/header_logo.png" /> </div>