React Router > Right aligning a button

Missions Page Right Aligning a Button

Next we're going to right align an action Button next to the MissionsHeader. We're using a flexbox to allow the button to align to the right. With CSS, we're using flex-grow: 1 to tell the first child inside our flex container to grow as much as it needs to. This is how we align the button to the right- the first child is "growing" as much as it needs to, while the button is only taking up as much space as it needs to.

Lesson 8/26

import styled from "styled-components";
import Button from "../Components/Button";

const MissionsHeaderRow = styled.div`
  display: flex;

  > :first-child {
    flex-grow: 1;
  }
`;

const MissionsHeader = styled.h1``;

function Missions() {
  return (
    <>
      <MissionsHeaderRow>
        <MissionsHeader> Missions </MissionsHeader>
        <Button> New Mission </Button>
      </MissionsHeaderRow>
    </>
  );
}

export default Missions;

Open Sandbox