ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3グリッドの解析

CSS3グリッドの解析

不言オリジナル: 2018-06-21 17:45:401416ブラウズ

この記事では、HTML と CSS でグリッドの操作を容易にするためのいくつかの新しい CSS3 プロパティを見ていきます。まず、HTML と CSS グリッドの歴史について少し説明し、なぜ以前はそれほど難しかったのかを理解しましょう。 1. グリッドの簡単な歴史

かつて、私たちのレイアウトは混乱していました。テーブルとフレームは、複数列のレイアウトを作成するための主要なツールです。彼らは仕事をやり遂げますが（実際にはかなり下手です）。

今日に照準を合わせてください。 HTML と CSS は非常に複雑になり、Web デザインの人気と洗練度は日々高まっています。私たちが使用していた古いレイアウト方法は明らかにアウトです。ただし、複数列レイアウトという従来の問題が表面化しました。

さらに状況を複雑にしているのは、ページ幅が静的ではなくなったことです。応答性が大流行しているため、パーセンテージベースの列幅を好む傾向があります。 960 ピクセルの固定幅に基づく単純なグリッドはもう機能しません。流動的なグリッドが必要です。

CSS2仕様のfloatを使用して列を解決する方法には問題があります。親要素がレイアウトを壊さないようにするには、clearfix を追加する必要があります。この方法により、親要素の高さの崩壊の問題が修正されます (フローティング要素が標準フローから外れ、親要素はフローティングリソースが存在しないと認識します)。私たちはこのアプローチをほとんど受け入れていますが、多くの人は依然としてこれをハッキングだと考えています。

インラインボックスを介した方法はそれほど一般的ではありませんが、依然として存在します。インライン要素は 1 行に留まり、自然な順序になります。行がいっぱいになると、後続の要素は自然に次の行に折り畳まれます。ただし、テキストのように動作するため、テキストのように動作します。これは、HTML 要素間に空白要素 (スペース、タブ、改行など) を避ける必要があることを意味します。インラインブロックはこのために設計されていないため、あまりうまく機能しません。

これら 2 つの方法のうち、フローティング方法がより信頼性があります。そのため、より人気があり、1位にランクされています。ただし、複数の列を作成した後、ある程度のパディング距離が必要になるため、コンテンツを再度圧縮する必要があることがわかります。これは最後の質問になります: ボックスモデルとは何ですか? 簡単に言うと、要素の実際のサイズには高さ/幅 + パディング + 横幅が含まれます。外側の境界線はボックスを大きくするのではなく、ボックス自体と他の要素の間にスペースを追加するだけです。したがって、幅をたとえば 25% に設定すると、ボックスの実際の幅はそれよりもはるかに大きくなり、1 行に 4 つの要素を入れるのに十分なスペースがないことを意味します。

この厄介な問題にはさまざまな解決策があります。負のマージン、ネストされた要素、私が知っているのはこれだけです。これらはすべて追加の CSS または DOM 要素を必要とし、ハックとしてカウントされます。正直に言うと、CSS2 ではグリッドを解決する良い方法はありません。

しかし現在、CSS3 は優れたサポートを提供しており、仕様にはグリッドに特化したいくつかの新機能が追加されています。これらの特徴は何でしょうか?どのように使用するのでしょうか?見てみましょう。

2. box-sizing: border-box

解決された問題の 1 つは、拡張ボックスモデルの性質です。この問題は、box-sizing の値を border-box に設定することで解決できます。コンテンツの幅を減らすと、サイドとパディングの間の距離も width 属性に計算されます。

HTML

<p class="row">
  <p class="column">Col one</p>
  <p class="column">Col two</p>
  <p class="column">Col three</p>
  <p class="column">Col four</p>
</p>

CSS

.row:after {
  clear: both;
  content: &#39;&#39;;
  display: block;
}
.column {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  min-height: 8em;
  overflow: hidden;
  padding: 2em;
  width: 25%;
}
.column:nth-child(1) { background-color: #9df5ba; }
.column:nth-child(2) { background-color: #9df5d7; }
.column:nth-child(3) { background-color: #9df5f5; }
.column:nth-child(4) { background-color: #9dd7f5; }

Effects

これはうまく機能しますが、フロートを使用する必要があり、フロートをクリアする必要もあります。さらに、パディングは要素のスペースとしてのみ使用でき、マージンは役割を果たしません。これは、高速要素間に実際のスペースはなく、そのコンテンツが存在することを意味します。これは多くのデザインにとって非常に便利ですが、それでも小さな間違いのように感じられます。
1.Firefox 1

2.Chrome 1

3.IE 8

4.Opera 7

5.Safari 3

3. width: calc (パーセント – 距離)

もう 1 つの優れたオプションは、calc( ）関数。これにより、JavaScript に依存せずに要素の実際の幅をさまざまな単位で計算できるようになります。

HTML

<p class="row">
  <p class="column">Col one</p>
  <p class="column">Col two</p>
  <p class="column">Col three</p>
  <p class="column">Col four</p>
</p>

CSS

.row { margin-left: -1em; }</p> <p>.row:after {
 clear: both;
 content: &#39;&#39;;
 display: block;
}
.column {
 float: left;
 margin-left: 1em;
 min-height: 8em;
 padding: 1em;
 width: -webkit-calc(25% - 3em);
 width: -moz-calc(25% - 3em);
 width: calc(25% - 3em);
}
.column:nth-child(1) { background-color: #9df5ba; }
.column:nth-child(2) { background-color: #9df5d7; }
.column:nth-child(3) { background-color: #9df5f5; }
.column:nth-child(4) { background-color: #9dd7f5; }

効果:

実際のサイズを再計算する機能は素晴らしいオプションですが、残念ながらまだ浮動小数点が必要であり、列のコンテナの外側のエッジの距離が負である必要もあります。同様に、素晴らしい選択ですが、まだ多少の欠陥があります。
1.Firefox 4

2.Chrome 19

3.IE 9

4.Opera ?

5.Safari 6 (少しバグがあるようです)

4. Flexbox

格納式レイアウトボックスには特定の構成動作があります要素- テーブルのようなもの。これは本当ですか？はい、そうです。テーブルの動作は、その内容に基づいて表示が変化するため、実際には非常に優れています。ただし、テーブルレイアウトは使用されなくなったため、テーブルタグはオプションではありません。

最初、伸縮ボックスは少し複雑に見えました。特に英語で話すのが苦手な私にとっては、理解するのが難しい属性がたくさんあります。幸運なことに、Chris Coyier が格納式ボックスに関する素晴らしいガイドを書いてくれたので、言及しておきます。

HTML

<p class="row">
  <p class="column">Col one</p>
  <p class="column">Col two</p>
  <p class="column">Col three</p>
  <p class="column">Col four</p>
</p>

CSS

.row {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -webkit-justify-content: space-between;</p>
<p>    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.column {
    margin: 0.5em;
    min-height: 8em;
    padding: 1em;
    width: 25%;
}
.column:nth-child(1) { background-color: #9df5ba; }
.column:nth-child(2) { background-color: #9df5d7; }
.column:nth-child(3) { background-color: #9df5f5; }
.column:nth-child(4) { background-color: #9dd7f5; }

効果:

CSS3 は多くの新機能をもたらし、いくつかの従来の問題を修正していますが、私の意見では、フレックスボックスレイアウトは CSS で柔軟なグリッドを作成するハック以外の唯一の方法です。ただし、残念なことに、ブラウザのサポートは平凡です。それにもかかわらず、他の方法はプレゼンテーションを豊かにするため、改善されており、ブラウザーのサポートも良好です。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

CSS3グリッドの解析

関連記事