css - 如何让 img 在 flex-end 对齐？

Question

我是新手，所以当我尝试以 CSS 方式对齐图像时失败了。使图像与屏幕右侧对齐的唯一方法是定位它。还有其他选择吗？

我试着做 jjustifyContent 、 justifySelf 甚至向右浮动。什么都没用。

Image to my app

我的代码:

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

你可以使用这个，justify-content: space-between

你的风格应该是，

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