入力要素をマップするコンポーネントがあります。このコンポーネントには、インラインにするかどうかを決定するフラグがあります。問題は、フレックスが期待どおりに機能しないように見えることです。justifyContent: 'space-between動作していない、応答していないようです。
何が間違っているのかわかりません。おそらく、これを達成するためのより良い/よりクリーンな方法がありますか？
justify-content: space-betweenフレックスコンテナに、それぞれの間に同じスペースがあるようにフレックスアイテムを調整するように指示します。そうは言っても、このプロパティは親コンテナにある必要があります。
<div style={flexContainer}>
{fields.map(({ inLine }) => (
...
))}
</div>
ラッピングはflex-wrapプロパティを使いたいと思います。flex-wrap: wrapコンテンツを含めることができなくなったときにフレックスアイテムをラップするようにフレックスの親に指示します。flex-basisこのコンテキストでは、幅のように動作します（そしてそれをオーバーライドします）。このプロパティを使用して、このコンテナが100% flex-basis行全体を占める必要があることをフレックスの親に伝えることができます。0%ここでインライン要素をflex-grow指定して、サイズを決定できます（つまり、フレックスコンテナ内の他のアイテムに対して、フレックスコンテナ内の残りのスペースのどれだけをアイテムに割り当てるかを指定します）。インラインフィールドの間にどうしても「空白」が必要な場合は、インラインmargin要素などのプロパティを使用します。
const flexContainer = {
display: "flex",
flexWrap: "wrap",
justifyContent: "space-between"
};
const style = inLine => ({
display: inLine ? "inline-flex" : "flex",
flexBasis: inLine ? "0" : "100%",
flexGrow: inLine ? "1" : "0",
});
CodeSandBox：https：//codesandbox.io/s/determined-sammet-xp2on？file = / src / Form.js
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加