How to Align Material-UI CardActions

CardActions in Material-UI are generally used to add components to the bottom of a Card. These are often icons wrapped in an IconButton. You may have several of these action components and need to align them precisely as desired. That can be done easily either with flex or margin, and we will explore examples of both today.

CardActions is different than the actions prop of the CardHeader, which adds a clickable component to the top right (by default) of the header.

In this post I’ll also discuss a great new feature in Chrome dev tools that helps developers understand how flexbox works.

The Code Sandbox link with full React code is in the Resources section.

CardActions Align Right with Margin or Flex

Left alignment is the default for items in CardActions. In order to have some or all items align right instead of left, we either need to use flex or margin. The result should look the same.

Flex generally is applied at the CardAction level, while margin is applied to the item that needs to be aligned right.

Here’s the code for the two cards shown above:

//using margin
//stylying
rightAlignItem: {
    marginLeft: "auto"
}

//JSX
<CardActions disableSpacing>
  <IconButton className={classes.rightAlignItem}>
    <FavoriteIcon />
  </IconButton>
</CardActions>

//using flex
//styling
parentFlexRight: {
  display: "flex",
  justifyContent: "flex-end"
}

//JSX
<CardActions disableSpacing className={classes.parentFlexRight}>
  <IconButton>
    <FavoriteIcon />
  </IconButton>
</CardActions>

Notice the margin class is on the IconButton and the flex class is on the CardAction. Also, on both I added the prop disableSpacing. This prop removes default margin applied by MUI. Without removing this, adding margin by class doesn’t have the desired effect. Flex still works, but the spacing is slightly different.

Next we will align two items to the right and keep one to the left.

Interestingly, flex on its own was not an option here. Flex either lets us align all items left or right. At the child level, flex can override the vertical orientation with alignSelf (when flexDirection="row"). However, we cannot override the parent horizontal orientation, so we must use either margin or a combination of flex and margin.

Here’s the code, first showing margin alone for alignment, then showing flex + margin:

//margin alone
//styling
rightAlignItem: {
    marginLeft: "auto"
}

//JSX
<CardActions disableSpacing>
  <IconButton>
    <FavoriteIcon />
  </IconButton>
  <IconButton className={classes.rightAlignItem}>
    <ShareIcon />
  </IconButton>
  <IconButton onClick={handleExpandClick}>
    <ExpandMoreIcon />
  </IconButton>
</CardActions>

//flex + margin
//styling
leftAlignItem: {
    marginRight: "auto"
},
parentFlexRight: {
    display: "flex",
    justifyContent: "flex-end"
}

//JSX
<CardActions disableSpacing className={classes.parentFlexRight}>
  <IconButton className={classes.leftAlignItem}>
    <FavoriteIcon />
  </IconButton>
  <IconButton>
    <ShareIcon />
  </IconButton>
  <IconButton onClick={handleExpandClick}>
    <ExpandMoreIcon />
  </IconButton>
</CardActions>

There are more examples of right alignment with flex and margin in the code sandbox.

CardActions Align Left with Margin or Flex

Since left alignment is default, we really only need something fancy if we have multiple components in the CardAction area.

In the top card, I use flex and justifyContent: "space-between" to “split” the items.

In the second card, I give the appearance of left alignment by only setting margin on the last icon.

//Split
//style
parentFlexSplit: {
  display: "flex",
  justifyContent: "space-between"
}

//JSX
<CardActions disableSpacing className={classes.parentFlexSplit}>
  <IconButton>
    <FavoriteIcon />
  </IconButton>
  <IconButton>
    <ShareIcon />
  </IconButton>
</CardActions>

//left align two items, right align third
//style
rightAlignItem: {
  marginLeft: "auto"
}

//JSX
<CardActions disableSpacing>
  <IconButton>
    <FavoriteIcon />
  </IconButton>
  <IconButton>
    <ShareIcon />
  </IconButton>
  <IconButton
    className={classes.rightAlignItem}
    onClick={handleExpandClick}
  >
    <ExpandMoreIcon />
  </IconButton>
</CardActions>

Chrome CSS Flexbox Debugging Tools

There is a new tool in dev tools (as of February 2021) called the Flexbox editor. It gives a great visual of what each flex property and value does. You can see it in the screenshot above.

The flexbox editor is visible in dev tools when a parent element has display: flex. Also, make sure you are updated at least to Chrome version 90.

There is also a new Flexbox section in the Layout pane of Chrome dev tools. I found it less useful, but if you want to see the layout of all flex items on your page you can do so.

Chrome 90 Release Notes Link

Resources

My MUI course on Udemy is now available!!! Build a full MUI app from beginning to end, learn every aspect of the sx prop, styled API, and the theme, and tackle the most challenging components! Do you want an active Q&A with me?!? Check here for coupons for my MUI course on Udemy.

Here are additional useful posts:

• How to Align MUI Typography (Vertically/Center/Right/Left)
• How to Use Justify Content in MUI
• Here’s an example of using CardMedia with images, videos, and IFrames inside a Card component

Code Sandbox Link