In Material UI how do I align right one button in a flex column?

Question

New to Material UI and flex I've read a lot of documentation but for some reason I'm missing how to take a Material UI <CancelIcon /> and align right only that icon in a <Drawer />. I've read that to be able to prevent the <Drawer /> from being inline I need to use flexDirection: 'column'.

Code

<Drawer
  {...{
    anchor: 'right',
    open: drawerOpen,
    onClose: handleDrawerClose,
  }}
  >
  <div className={drawerContainer}>
    <CancelIcon className={cancelBtn} />
    <GetDrawerChoices />
  </div>
</Drawer>

Styles

import { makeStyles } from '@material-ui/core'

const useStyles = makeStyles({
  drawerContainer: {
    padding: '24px 0',
    display: 'flex',
    flexDirection: 'column',
  },
  cancelBtn: {
    margin: '0 28px 8px 28px',
    cursor: 'pointer',
    // justify: 'flex-end',
    alignContent: 'flex-end',
  },
})

export default useStyles

Research

I've tried the following:

How to add close icon in Material UI Dialog Header top right corner:

  cancelBtn: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
  },

What's the right way to float right or left using the material-ui appbar with material-ui-next?

cancelBtn: {
  display: 'flex',
  flex: 1,
},

How to align a component to the center/right:

cancelBtn: {
  justify: 'flex-end',
},

Further reading: Aligning Items in a Flex Container

Preview

In Material UI with flex how can I get the <CancelIcon /> to align right but leave the remaining text left justified?

Answer 1

You can use Box component outside the CancelBtn like this.

<Box
  display="flex"
  justifyContent="flex-end"
>
  <CancelIcon className={cancelBtn} />
</Box>

Or like this.

<Box
  display="flex"
>
  <Box flexGrow={1} />
  <CancelIcon className={cancelBtn} />
</Box>

Answer 2

hotcakedev's answer got me where I needed. Just cleaned it up:

bring in:

// Material UI
import { Box } from '@material-ui/core'
import CancelIcon from '@material-ui/icons/Cancel'

// Styles
import useStyles from '../styles'

const { drawerContainer, cancelBtn } = useStyles()

the div:

<div className={drawerContainer}>
  <Box className={cancelBtn}>
    <CancelIcon />
  </Box>
  <GetDrawerChoices />
</div>

and styles:

drawerContainer: {
  padding: '24px 0',
  display: 'flex',
  flexDirection: 'column',
},
cancelBtn: {
  margin: '0 20px 8px 0',
  cursor: 'pointer',
  display: 'flex',
  justifyContent: 'flex-end',
},

Answer 3

if you want move only one element to right side you can use order in flex

cancelBtn: {
  order : 1         // it moves just cancelBtn to the right side

};