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 を実装すると、すべての項目が最も幅の広い要素と同じ幅になるレイアウトを作成でき、一貫性があり見た目も美しいレイアウトが保証されます。外観。