CODEWITHSUNDEEP
reactjsmaterial-ui
Santhosh
Santhosh

Reputation: 11844

reactjs: material ui: how to align two items to the two ends

I have the following code in reactjs using material ui theme

const useStyles = makeStyles((theme) => ({
  root2: {
    maxWidth: 345,
    flexGrow: 1
  },
  paper2: {
    padding: theme.spacing(1),
    color: theme.palette.text.secondary,
  }
})

<div className={classes.root2}>
  <Grid container spacing={3}>
    <Grid item xs={12}>
      <Paper className={classes.paper2}>
       <Grid container alignItems="center" spacing={3}>
          <Grid item>
            <h3>Instructions</h3>
          </Grid>
          <Grid item>
            <IconButton>
              <ExpandMoreIcon />
            </IconButton>
          </Grid>
        </Grid>
      </Paper>
    </Grid>
  </Grid>
</div>

What i want is

enter image description here

I saw an example at https://material-ui.com/system/flexbox/#flex-grow

enter image description here

which uses the code:

import React from 'react';
import Box from '@material-ui/core/Box';

export default function FlexGrow() {
  return (
    <div style={{ width: '100%' }}>
      <Box display="flex" p={1} bgcolor="background.paper">
        <Box p={1} flexGrow={1} bgcolor="grey.300">
          Item 1
        </Box>
        <Box p={1} bgcolor="grey.300">
          Item 2
        </Box>
        <Box p={1} bgcolor="grey.300">
          Item 3
        </Box>
      </Box>
    </div>
  );
}

I am new to material ui. Here the example uses Box instead of Grid.

So which is the best way to handle this

I am used to bootstrap 4: IN bootstrap4 i can do this same thing using

enter image description here

https://getbootstrap.com/docs/4.4/utilities/flex/#justify-content

<div class="d-flex justify-content-between">...</div>

How to do something like this in material UI

Upvotes: 0

Views: 3641

Answers (1)

bhugo313
bhugo313

Reputation: 451

Adding justify="space-between" to Grid container component will solve your issue.

Please refer this.

  <Grid container spacing={3}>
    <Grid item xs={12}>
      <Paper className={classes.paper2}>
       <Grid container alignItems="center" justify="space-between">
          <Grid item>
            <h3>Instructions</h3>
          </Grid>
          <Grid item>
            <IconButton>
              <ExpandMoreIcon />
            </IconButton>
          </Grid>
        </Grid>
      </Paper>
    </Grid>
  </Grid>

Upvotes: 4

Related Questions