CODEWITHSUNDEEP
reactjsmaterial-ui
Shiva Shankari
Shiva Shankari

Reputation: 27

How to add space between the Flex items in ReactJs?

This is the image of the code and the page.

The justifyconent attribute in the Containerr doesn't seem to work. Why are the 3 children elements stuck together with no space?

EDIT: I tried justifyContent too. (instead of JustifyContent as in the picture..)

Upvotes: 2

Views: 21035

Answers (4)

thienms98
thienms98

Reputation: 187

Your style must be in lower camel case like

<div style={{ display:"flex", flexWrap:"wrap", justifyContent:"space-between"}}>
</div>

Upvotes: 1

Ananth George
Ananth George

Reputation: 9

Use the margin attributes to add some spacing to the Paper component. It's responsive as well.

const styles = {
  root: {
    flexGrow: 1
  },
  paper: {
    padding: 5,
    textAlign: "center",
    marginRight: 4,
    marginTop: 10
  }
};

It should work for any other component that fits this case as well. (Ex: Card)

Upvotes: 0

Stuart Casarotto
Stuart Casarotto

Reputation: 1187

It looks like the <Paper/> components are simply filling the available space. I tried to make a SUPER simple CodePen to demonstrate this (https://codepen.io/venetian13/pen/xPvYaM). flex: 1 and flex 4 will fill available space in proportion to each other | 1 | 4 | 1 |. If you want them to be separate you have to give them a cumulative width > the containers total width.

Great Reference : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 1

Amogh P
Amogh P

Reputation: 43

Keys for styles in ReactJs should be lower camel case. In your case, you are using JustifyContent. Instead, it should justifyContent.

justifyContent : 'space-between'

This should solve your problem.

Upvotes: 3

Related Questions