如何使用`flex display`來分隔兩個按鈕。

-1

我想用flex display分隔兩個按鈕。我正在使用react。如何使用`flex display`來分隔兩個按鈕。

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>

我的代碼不能正常工作。

來源

2017-03-21 jiexishede

你試過'justifyContent：'space-between''嗎？ –

您可以在這裏閱讀關於flex佈局的所有信息：https：//facebook.github.io/react-native/docs/flexbox.html，您也可以使用'保證金'適當性（例如：marginLeft：20，marginRight：20）它也可以工作 –

'justifyContent：'space-between''或'space-around'，或者是OK。 – jiexishede

由於文檔：

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

你應該嘗試：

justifyContent: 'space-between'

您可以marginRight和marginLeft太玩。希望幫助

來源

2017-03-21 11:22:51

試試這個代碼

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

來源

2017-03-21 10:56:11 Amal

你的回答非常好。 – jiexishede

很高興它幫助你 – Amal

如何使用`flex display`來分隔兩個按鈕。

回答

相關問題