CSS を使用して同じサイズのアイテムを含むレイアウトを作成するにはどうすればよいですか?

CSS を使用して同じサイズのアイテムを含むレイアウトを作成する

目標は、各アイテムの幅が最も広いアイテムと同じ幅になるレイアウトを実現することです。内容に関係なく、要素。このレイアウトには複数の行を含めることができ、それに応じて項目を折り返すことができます。

JavaScript の使用

提供された例で示されているように、JavaScript は、次の行の最大幅を計算することでこのタスクを簡単に実行できます。

CSS を使用して同じレイアウトを実現

このレイアウトを、純粋な CSS を使用して実現することもできます。 JavaScriptが必要です。その方法は次のとおりです。

.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-item は、個々の項目にスタイルを適用します。

flex-wrap プロパティをラップに設定し、justify-コンテンツを .list-item 内の flex-start として使用すると、行頭への位置揃えを維持しながら、必要に応じて項目が新しい行に折り返されるようになります。

以上がCSS を使用して同じサイズのアイテムを含むレイアウトを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。