ReactJS：なぜCSS FlexboxのalignItemsは機能しませんか？

Question

ReactJSでは、Material-UIの<TextField/>http://www.material-ui.com/#/components/text-fieldを使用して、すべての浮動小数点を左に作成しようとしていますが、2つの間に間隔を空けようとしていますが、alignItemsは機能しません。それはちょうど左に浮かんでいて、間には間隔がありません。

何が問題なのですか？

render() { 

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

Answer 1

正しいプロパティを使用していません。行コンテキストでは、x軸に要素を配置するにはjustify-contentを使用する必要があります。

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