Question

我想使用flex display分隔两个按钮。

现在，我正在使用react。

  const style = {
      textAreaStyle: {
        width:'700'
      },
      buttonFatherStyle:{
        display:'flex',
        display:"-webkit-flex",
        flexWrap:  'wrap',
        justifyContent:'around',
        backgroundColor:'red',
      }
    }

我的jsx：

          <div style={style.buttonFatherStyle}>
            <FlatButton  style={{backgroundColor:'blue'}} type="submit" disabled={pristine || submitting}> submit </FlatButton>
            <FlatButton  style={{backgroundColor:'green'}} type="button" disabled={pristine || submitting} onClick={reset}> Clear
            </FlatButton>
          </div>

我的代码不起作用。

Answer 1

试用此代码

flatbutton {
    flex-basis: 50%;
    text-align: center;
}

Answer 2

作为文档：

facebook.github.io/react-native/docs/flexbox.html

你应该尝试：

justifyContent: 'space-between'

您也可以使用marginRight和marginLeft。希望有所帮助

如何使用`flex display`分隔两个按钮。

2 个答案: