CSS Flex レイアウトを使用して不規則なグリッド レイアウトを実装する方法

CSS Flex エラスティック レイアウトを使用して不規則なグリッド レイアウトを実装する方法

Web デザインでは、ページの分割とレイアウトを実現するためにグリッド レイアウトを使用することが必要になることがよくあります。通常はグリッドです。レイアウトは規則的で、各グリッドは同じサイズですが、場合によっては、不規則なグリッド レイアウトを実装する必要がある場合があります。

CSS Flex Flex Layout は、不規則なグリッド レイアウトを含むさまざまなグリッド レイアウトを簡単に実装できる強力なレイアウト方法です。以下では、CSS Flex エラスティック レイアウトを使用して不規則なグリッド レイアウトを実装する方法と、具体的なコード例を紹介します。

まず、HTML 構造を作成する必要があります。<div> 要素または他のコンテナ要素をグリッド コンテナとして使用し、コンテナ内に複数のサブ要素を作成できます。これらのサブ要素 この要素は、レイアウトしたいグリッドです。 <p>たとえば、「grid-container」という名前の <code><div> 要素をグリッド コンテナーとして作成します。この要素には、「item1」、「item2」、「」という 3 つの子要素が含まれています。 item3": <pre class='brush:php;toolbar:false;'>&lt;div class=&quot;grid-container&quot;&gt; &lt;div class=&quot;item item1&quot;&gt;Item 1&lt;/div&gt; &lt;div class=&quot;item item2&quot;&gt;Item 2&lt;/div&gt; &lt;div class=&quot;item item3&quot;&gt;Item 3&lt;/div&gt; &lt;/div&gt;</pre><p>次に、グリッド コンテナと子要素の CSS スタイルを設定する必要があります。<code>display: flex を使用して、グリッド コンテナをフレキシブル コンテナとして設定します:

.grid-container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 0 auto;
}

上記のコードでは、flex-wrap:wrap 属性により自動行折り返しが実装されています。グリッド コンテナーの幅がすべての子要素を収容するのに十分でない場合、自動的に折り返して表示されます。そして flex: 1 0 auto は各子要素を同じサイズにすることができます。

不規則なグリッド レイアウトを実現するために、flex-grow 属性と flex-basis 属性を使用して、サブオブジェクトのスケーリング率とベース サイズを制御することもできます。それぞれの要素です。

たとえば、最初の子要素「item1」を元のグリッド コンテナの幅の 2 倍にしたい場合は、その flex-grow を 2 に設定し、他の子要素を「item1」に設定します。要素はデフォルト 1 のままです:

.item1 {
  flex-grow: 2;
}

同様に、3 番目の子要素「item3」の幅を他の子要素の 2 倍にしたい場合は、その flex-basis を 200 に設定できます。 % :

.item3 {
  flex-basis: 200%;
}

上記のコード設定により、不規則なグリッド レイアウトを実現できます。完全な CSS コードは次のとおりです。

.grid-container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 0 auto;
}

.item1 {
  flex-grow: 2;
}

.item3 {
  flex-basis: 200%;
}

上記は、CSS Flex エラスティック レイアウトを使用して不規則なグリッド レイアウトを実装する方法についての詳細な紹介と具体的なコード例です。 CSS Flex レイアウトのさまざまなプロパティを柔軟に使用することで、さまざまな独自のグリッド レイアウトを簡単に実装し、ページの視覚効果とユーザー エクスペリエンスを向上させることができます。