This is the image of the code and the page.
Containerr中的justifyconent属性似乎不起作用。为什么3个孩子的元素没有空间?
编辑:我也试过justifyContent
。 (而不是图片中的JustifyContent
。)
答案 0 :(得分:1)
ReactJs中样式的键应该是较低的驼峰案例。 在您的情况下,您正在使用JustifyContent。相反,它应该证明内容。
justifyContent : 'space-between'
这可以解决您的问题。
答案 1 :(得分:1)
看起来<Paper/>
组件只是填充了可用空间。我尝试制作一个超简单的CodePen来演示这个(https://codepen.io/venetian13/pen/xPvYaM)。 flex: 1
和flex 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
}
};
它也应适用于适合这种情况的任何其他组件。 (例如:卡)