如何在ReactJs中的Flex项目之间添加空间?

时间:2017-12-09 15:28:29

标签: reactjs material-ui

This is the image of the code and the page.

Containerr中的justifyconent属性似乎不起作用。为什么3个孩子的元素没有空间?

编辑:我也试过justifyContent。 (而不是图片中的JustifyContent。)

3 个答案:

答案 0 :(得分:1)

ReactJs中样式的键应该是较低的驼峰案例。 在您的情况下,您正在使用JustifyContent。相反,它应该证明内容。

justifyContent : 'space-between'

这可以解决您的问题。

答案 1 :(得分:1)

看起来<Paper/>组件只是填充了可用空间。我尝试制作一个超简单的CodePen来演示这个(https://codepen.io/venetian13/pen/xPvYaM)。 flex: 1flex 4会相互按比例填充可用空间| 1 | 4 | 1 |。如果你想让它们分开,你必须给它们一个累积宽度&gt;容器总宽度。

精彩参考:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

答案 2 :(得分:0)

使用margin属性为Paper组件添加一些间距。它也具有响应能力。

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

它也应适用于适合这种情况的任何其他组件。 (例如:卡)