CSSを使用してすべてのリスト項目が最も幅の広い項目と同じ幅になるようにするにはどうすればよいですか?

CSS を使用して最も幅の広い要素に均一な項目幅を設定する方法

で示すように、インライン フレックスボックスを利用することで、目的のレイアウトを実現できます。提供される CSS ソリューション:

.list-container {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
}

.list {
  display: flex;
  flex-direction: column;
}

.list-item {
  text-transform: capitalize;
  background-color: rgb(200, 30, 40);
  font-size: 1.3em;
  text-align: left;
  padding: 10px;
  margin: 1px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

この CSS では、 .list-container でインライン フレックスボックスを表示し、その子の .list 要素が水平に表示されるようにします。 .list 要素には垂直方向のフレックスボックス表示があり、子の .list-item 要素を垂直方向に積み重ねることができます。

重要なのは、.list-item 要素の flex-wrap プロパティがラップに設定されていることです。これは、.list コンテナ内の 1 行に収まらない場合、自動的に次の行に折り返されることを意味します。

さらに、.list- の justify-content プロパティを flex-start に設定します。 item 要素。これにより、要素は .list コンテナの左端に揃えられます。これにより、最も長い項目がリスト内のすべての項目の幅を決定するようになります。

この CSS を実装すると、すべての項目が最も幅の広い要素と同じ幅を持つレイアウトを作成でき、一貫性があり見た目も美しいレイアウトが保証されます。外観。

以上がCSSを使用してすべてのリスト項目が最も幅の広い項目と同じ幅になるようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。