ReactJS：为什么 CSS Flexbox 的 alignItems 不起作用？

Question

在 ReactJS 中，使用 Material-UI 的 <TextField/> http://www.material-ui.com/#/components/text-field，我试图让所有的浮动都向左，但在在两者之间，但 alignItems 不起作用。它只是向左浮动，中间没有间隔。

可能是什么问题？

render() {

    return ( 
        <div style={{display: 'flex', flexFlow: 'row wrap', alignItems: 'stretch'}}>
          <div>
            <TextField/>
          </div>
          <div>
            <TextField/>
          </div>
        </div>
    )
}

Answer 1

您没有使用正确的 属性。在行上下文中，您应该使用 justify-content 将元素放置在 x 轴上。

render() {
  return ( 
    <div style={{display: 'flex', flexFlow: 'row wrap', justifyContent: 'space-between'}}>
      <div>
        <TextField/>
      </div>
      <div>
        <TextField/>
      </div>
    </div>
  )
}