ReactJsのFlexアイテム間にスペースを追加するには？

This is the image of the code and the page.ReactJsのFlexアイテム間にスペースを追加するには？

Containerrのjustifyconent属性が機能していないようです。なぜ3つの子供の要素がスペースなしで一緒にくっついているのですか？

EDIT：justifyContentも試しました。（図のようにJustifyContentの代わりに）

2017-12-09 Shiva Shankari

ReactJsのスタイルのキーは、ラクダのケースより小さくする必要があります。あなたのケースでは、JustifyContentを使用しています。代わりに、それはjustifyContentでなければなりません。

justifyContent : 'space-between'

これは問題を解決するはずです。

出典

2017-12-09 15:33:37

私は質問で述べたように、いずれかの動作しませんでした... –

<Paper/>のようなコンポーネントは、単に空き領域を埋めるようです。私はこれを実証するためにSUPER simple CodePenを作ろうとしました（https://codepen.io/venetian13/pen/xPvYaM）。 flex: 1とflex 4は、お互いに比例して空き領域を埋めるでしょう| 1 | 4 | 1 |。それらを別々にするには、累積幅>コンテナの合計幅を指定する必要があります。

グレート参考：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

出典

2017-12-09 16:41:30

はreactjsのためのJavaScriptシンタックスの変更をしていますか？ –

また、第1コンポーネントの下に第4コンポーネントが必要な場合はどうなりますか？ –

私はあなたが質問すると仮定します。「反応はjavascriptで構文が変わるのですか？あなたはスタイリング（CSS）に忠実です。あなたがReactでインラインスタイルを使っているなら、lowerCamelCaseを@Amogh Pと同じように使う必要があります。あなたに私があなたのためにCSSを変換してもらいたいかどうか私に教えてください。 –

ReactJsのFlexアイテム間にスペースを追加するには？

答えて

関連する問題