Flexbox アイテムが同じ幅を占めるようにするにはどうすればよいですか?

Flexbox アイテムを均一に分散する

Flexbox は多用途のレイアウト方法として人気を博していますが、アイテムの周囲のスペースを均等に分散する傾向があります。アイテム自体。この課題に対処するために、すべてのフレックスボックス項目が同じ幅を占めるようにするソリューションを検討してみましょう。

フレックスボックスは、flex-grow プロパティに基づいて項目を拡大および縮小する原理に基づいて動作します。デフォルトでは、flex-grow は 0 に設定されており、項目は自然な幅でレンダリングされます。ただし、このプロパティを変更して、目的の結果を得ることができます。

同じ幅の項目を作成するには、フレックス ベースを 0 に設定します。これにより、すべての要素に共通の開始点が確立されます。さらに、flex-grow を 1 に設定して項目が拡張できるようにします。これにより、使用可能なスペースを満たすまで均等に拡張されます。

次の CSS コードは、このアプローチを示しています。

.header {
  display: flex;
}

.item {
  flex: 1 1 0px;
  text-align: center;
  border: 1px solid black;
}

flex-basis を 0 に設定し、flex-grow を 1 に設定すると、.item クラス内のすべての項目は、その内容に関係なく、同じ量のスペースを持つようになります。これにより、元の例で観察された不均一な分布が解消されます。

注: 一部の IDE およびリンターは、flex から 'px' 単位を省略することを提案する場合があります。ただし、これを保持すると、Internet Explorer で正しくレンダリングされます。

以上がFlexbox アイテムが同じ幅を占めるようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。