最新の CSS レイアウトを使用すると、開発者はわずか数回のキーストロークで意味のある強力なスタイル ルールを作成できます。上記の説明と次の投稿では、並外れた働きをする 10 個の強力な CSS レイアウトを検討します。
01. スーパーセンター：プレイスアイテム：センター
最初の「単一行」レイアウトでは、CSS 全体の最大の謎であるセンタリングを解決しましょう。place-item: center を使用すると、これが思ったより簡単にできることを知っておいてください。
まず表示方法として Grid を指定し、次に同じ要素上に place-item: center を記述します。place-items は、align-items と justify-items を同時に設定する簡単な方法です。これを center に設定すると、align-items と justify-items の両方が center に設定されます。
.parent {
display: grid;
place-items: center;
}これにより、内部サイズに関係なく、コンテンツを親内で完全に中央に配置できます。
02. パンケーキのレイアウトを分解する: flex: <grow> <shrink> <baseWidth>
次は解体パンケーキです！これはマーケティング Web サイトの一般的なレイアウトです。たとえば、通常は画像、タイトル、そして製品の機能の一部を説明するテキストが含まれる 3 つの項目の行が存在する場合があります。モバイルでは、それらを適切にスタックし、画面サイズの拡大に合わせて拡張できるようにしたいと考えています。
Flexbox を使用してこの効果を実現すると、画面サイズが変わったときにメディア クエリを使用してこれらの要素の位置を調整する必要がなくなります。
flex の略語は flex: です <flex-grow> <flex-shrink> <flex-basis> 。
このため、ボックスをその <flex-basis> サイズに合わせて埋め、より小さいサイズに縮小するが、追加のスペースを埋めるために拡張したくない場合は、 flex: 0 1 と記述します<flex-basis> 。この場合、あなたのものは <flex-basis> 150ピクセルなので、次のようになります。
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}次の行に折り返すときにボックスを引き伸ばしてスペースを埋めたい場合は、 <flex-grow> これを 1 に設定します。次のようになります。
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
ここで、画面サイズを拡大または縮小すると、これらのフレックス項目が縮小または拡大します。
03. サイドバーのレイアウト: グリッド-テンプレート-列: minmax( <min>, <max>) …)
このデモでは、グリッド レイアウトに minmax 関数を利用します。ここではサイドバーの最小サイズを 150 ピクセルに設定しますが、より大きな画面では 25% 引き伸ばします。サイドバーは、親の水平スペースの 25% が 150 ピクセル未満になるまで、常に 25% を占めます。
次の値を Grid-template-columns の値として追加します: minmax(150px, 25%) 1fr 。最初の列の項目 (この場合はサイドバー) の最小最大値は 150px (25%) で、2 番目の列の項目 (ここではメインセクション) は単一の 1fr トラックとして残りのスペースを占めます。
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}04. パンケーキスタックレイアウト：grid-template-rows：auto 1fr auto
Deconstructed Pancake とは異なり、この例では、画面サイズが変更されたときに子要素が含まれません。スティッキー フッターと呼ばれることが多いこのレイアウトは、複数のモバイル アプリ (フッターはツールバーであることが多い) や Web サイト (単一ページ アプリではこのグローバル レイアウトがよく使用されます) にわたって、Web サイトやアプリで一般的に使用されます。
コンポーネントに「display:grid」を追加すると、単一列のグリッドが得られますが、メイン領域の高さはフッターの下のコンテンツと同じになります。
フッターを下部に固定するには、次を追加します。
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}1fr ヘッダーおよびフッター コンテンツは、子のサイズを自動的に取得し、残りのスペース (1fr) をメイン領域に適用するように設定されますが、自動サイズ変更される行は、子の最小コンテンツのサイズを取得するため、コンテンツ サイズが増加します。それ自体は調整するために成長します。
05. クラシック聖杯レイアウト: グリッドテンプレート: auto 1fr auto / auto 1fr auto
古典的な聖杯レイアウトの場合、ヘッダー、フッター、左サイドバー、右サイドバー、メイン コンテンツがあります。前のレイアウトと似ていますが、サイドバーが追加されました。
1 行のコードでグリッド全体を記述するには、grid-template プロパティを使用します。これにより、行と列を同時に設定できます。
属性と値のペアは次のとおりです: Grid-template: auto 1fr auto / auto 1fr auto 。最初と 2 番目のスペースで区切られたリストの間のスラッシュは、行と列の間の区切り文字です。
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}前の例と同様に、ヘッダーとフッターには自動サイズ変更コンテンツがあります。ここでは、左側と右側のサイドバーは、子の固有のサイズに基づいて自動サイズ変更されます。ただし、今回の寸法は垂直 (高さ) ではなく水平 (幅) です。
06. 12 グリッド間: グリッド-テンプレート-列:repeat(12, 1fr)
次に、もう 1 つの古典的なレイアウト、つまりグリッド全体に 12 個のレイアウトがあります。repeat() 関数を使用すると、CSS でグリッドをすばやく作成できます。グリッド テンプレート列でrepeat(12, 1fr); を使用すると、1frごとに12列が得られます。
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}12 列のトラック グリッドができたので、グリッド上に子を配置できます。1 つの方法は、グリッド線を使用して配置することです。たとえば、grid-column: 1 / 13 は、最初の行から最後の行 (行 13) まで、12 列にまたがります。Grid-column: 1 / 5; 最初の 4 列にまたがります。
もう 1 つの方法は、span キーワードを使用することです。スパンを使用すると、開始線を設定し、その開始点から広がる列の数を設定します。この場合、グリッド列: 1 / スパン 12 はグリッド列: 1 / 13 と同等になり、グリッド列: 2 / スパン 6 はグリッド列: 2 / 8 と同等になります。
.child-span-12 {
grid-column: 1 / span 12;
}07. RAM (Repeat、Auto、MinMax): グリッドテンプレート列(auto-fit、minmax( <base>、1fr))
この 7 番目の例では、すでに知っている概念のいくつかを組み合わせて、自動的に配置された柔軟な子を持つ応答性の高いレイアウトを作成します。素敵できちんとしています。ここで覚えておくべき重要な点は、repeat 、 auto-(fit|fill) 、および minmax()' です。これらの頭字語 RAM を覚えておいてください。
要するに、次のようになります。
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}もう一度repeatを使用しますが、今回は明示的な数値の代わりにauto-fitキーワードを使用します。これにより、これらの子要素が自動的に配置されます。これらの子要素の基本的な最小サイズは 150px で、最大サイズは 1fr です。つまり、小さい画面では子要素が 1fr 幅全体を占め、幅が 150px に達すると同じ行に流れ始めます。
自動調整を使用すると、水平サイズが 150 ピクセルを超えると、ボックスは残りのスペース全体を埋めるように引き伸ばされます。ただし、自動入力に変更すると、minmax 関数の基本サイズを超えても伸びなくなります。
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}08. 配置とレイアウト: justify-content: space-between
次のレイアウトで、ここで注目すべき主な点は justify-content: space-between です。これは、最初と最後の子要素を境界ボックスの端に配置し、残りのスペースを要素間に均等に配置します。これらのカードの場合、flex-direction: column を使用して方向を列に設定し、Flexbox 表示モードで配置されます。
これにより、タイトル、説明、画像ブロックが親カード内の垂直列に配置されます。次に、justify-content: space-between を適用して、最初の (タイトル) 要素と最後の (画像ブロック) 要素をフレックスボックスの端に固定し、それらの間に説明テキストを各エンドポイントに等間隔で配置します。
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}09. 自分のスタイルを貫く：clamp( <min>, <actual>, <max>)
ここでは、少数のブラウザーでしかサポートされていないものの、レイアウトとレスポンシブ UI デザインに非常に興味深い効果をもたらすテクノロジーをいくつか紹介します。このデモでは、以下に示すように、クランプ ツールを使用して幅を設定します: width:clamp( <min>, <actual>, <max>) 。
これにより、実際のサイズだけでなく、絶対的な最小サイズと最大サイズも設定されます。値を指定すると、次のようになります。
.parent {
width: clamp(23ch, 60%, 46ch);
}ここでの最小サイズは 23ch または 23 文字単位、最大サイズは 46ch または 46 文字単位です。文字幅の単位は、要素のフォント サイズ (具体的には 0 グリフの幅) に基づきます。「実際の」サイズは 50% で、これはこの要素の親の幅の 50% を表します。
ここで、clamp() 関数が行うことは、50% が 46ch (より広いビューポートの場合) を超えるか、23ch 未満 (より小さなビューポートの場合) になるまで、要素の幅を 50% に維持することです。親の寸法を伸縮すると、このカードの幅が最大制限点まで増加し、最小制限点まで減少することがわかります。その後、他のプロパティを適用して親を中心に配置したため、親の中心に留まります。これにより、テキストが広すぎず（46 チャネル以上）、狭すぎず（23 チャネル未満）、すっきりとしたレイアウトが可能になります。
これは、レスポンシブ タイポグラフィを実装するための優れた方法でもあります。たとえば、次のように記述できます: font-size:clamp(1.5rem, 20vw, 3rem) 。この場合、タイトルのフォント サイズは常に 1.5rem から 3rem の間のままですが、ビューポートの幅に合わせて実際の 20vw 値に基づいて拡大または縮小します。
これは、最小サイズと最大サイズの値で読みやすさを確保するための優れた手法ですが、最新のブラウザーのすべてがこれをサポートしているわけではないため、フォールバックが適切に配置されていることを確認してテストしてください。
10. アスペクト比を維持する: アスペクト比: <width> / <height>
この最後のレイアウト ツールは最も実験的なものです。これは最近 Chromium 84 の Chrome Canary に導入され、Firefox はその実現に積極的に取り組んでいますが、ブラウザの安定したバージョンはまだありません。
しかし、これはよく聞かれる質問なので言及しておきたいと思います。これは単に画像のアスペクト比を維持するだけです。
アスペクト比プロパティを使用してカードのサイズを変更すると、緑色のビジュアル ブロックは 16 x 9 のアスペクト比を維持します。このアスペクト比は、アスペクト比 16 / 9 によって維持されます。
.video {
aspect-ratio: 16 / 9;
}このプロパティを使用せずに 16 x 9 のアスペクト比を維持するには、padding-top ハックを使用し、56.25% のパディングを与えて上と幅の比率を設定する必要があります。ハッキングとパーセンテージの計算の必要性を回避するためのプロパティが間もなく提供される予定です。1 / 1 の比率を使用して正方形を作成し、2 / 1 の比率を使用して 2:1 の比率を作成できます。任意の画像倍率を設定できます。
.square {
aspect-ratio: 1 / 1;
}この機能はまだ開発中のものですが、多くの開発者が直面する矛盾を解決するため、知っておく価値はあります。特にビデオと iframe に関して私自身も何度も直面しました。
結論は
これら 10 個の強力な CSS レイアウトを完成させるために、辛抱強くお待ちいただきありがとうございます。詳細については、ビデオ全体をご覧になり、デモを実際にお試しください。
フルビデオ: https://www.youtube.com/watch?v=qm0IfG1GyZU
デモ: https://1linelayouts.gitch.me/
著者: フロントエンドの無知と理解
https://blog.csdn.net/qq_56966124/article/details/124225189