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

【问题标题】：How to use `flex display` to separate two buttons.如何使用 `flex display` 分隔两个按钮。
【发布时间】：2017-08-12 23:31:19
【问题描述】：

我想使用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>

我的代码不起作用。

【问题讨论】：

你试试justifyContent: 'space-between' 吗？
你可以在这里阅读所有关于 flex Layout 的信息：facebook.github.io/react-native/docs/flexbox.html 并且你也可以使用“margin”的适当性（例如：marginLeft：20，marginRight：20）它也可以工作
justifyContent: 'space-between' 或 space-around 都可以。
好吧，你能把我的答案标记为验证吗？ :)

标签： css reactjs flexbox

【解决方案1】：

作为文档：

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

你应该试试：

justifyContent: 'space-between'

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

【讨论】：

【解决方案2】：

试试这个代码

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

【讨论】：

很高兴它帮助了你