divに複数のスパンを整列する方法は？

Question

divの中にspan要素のような形でタグを表示しようとしています。

タグは、ここに整列中心であるが、タグが次の行/列にシフトする場合、次に以下の行は中央に整列されません。

は、私は両方の行が中央揃えになるように設定します。以下は

は同じのためReactJSコードです：

const styles = { 
    tag: { 
    border: "1px solid #ffffff", 
    borderRadius: "10%", 
    padding: 2, 
    margin: "2px" 
    }, 
    tagsWrapper: { 
    width: "100%", 
    padding: "5px", 
    display: "flex", 
    flexWrap: "wrap" 
    } 
}; 

<div style={styles.tagsWrapper}> 
    <div 
    style={{ 
     margin: "0px auto", 
     display: "flex", 
     flexWrap: "wrap" 
    }}> 
    {this.props.tags.map((tag, index) => { 
     if (tag.selected) 
     return (
      <span key={index} style={styles.tag}> 
      {tag.label} 
      </span> 
     ); 
     else return null; 
    })} 
    </div> 
</div> 

私は解決策を見つけることを試みたが、いずれも見つけることができませんでした。

Answer 1

ラッパーに...フレキシボックスの使用にjustify-content:center

を使用しているので。これはあなたが後になったものでなければなりません。

justify-content：center;中心付近の/ *パックアイテム*/

^MDN