CSSは、プロパティをコントロールするWebページレイアウトを制御します。ブロック要素は全幅とスタックを垂直に取り、インライン要素はラインブレークなしでテキスト內(nèi)で流れ、FlexBoxは列または列のアイテムを簡単な間隔で並べ、グリッドは正確な行と列制御で2次元レイアウトを管理します。全幅スタッキングにブロックを使用し、タイトなインライン要素のインライン、1方向のアライメント用のフレックスボックス、および複雑な構(gòu)造化されたデザインのグリッドを使用します。

Webページにいくつかの要素を並べるか、何かを完全に伸ばすものを作成しようとしたことがあるなら、おそらくCSSディスプレイプロパティにぶつかります。それらはCSSのレイアウトのバックボーンであり、 block 、 inline 、 flex 、 gridの動作が自信を持ってページ構(gòu)造を制御するのに役立つことを知ることができます。

ブロックとインラインの基本を理解します

これら2人はゲームで最も古いプレイヤーであり、今日でも非常に便利です。

• ブロック要素は、デフォルトで利用可能な全幅を取り上げます。 <div> 、 <code><p></p> 、 <h1></h1>などの要素を考えてみてください。それらは垂直に積み重ねて、他の要素を押しのけます。
• <span></span>や<a></a>などのインライン要素は、テキストの流れの中に座っています。彼らは新しいラインから始まらず、必要な限り多くの幅を占有します。

たとえば、HTMLで3つの<span></span>が互いに隣にある場合、コンテナの端にぶつかるまで並んで並んでいます。しかし、3つの<div>はそれぞれ獨自のラインにあります。<p>注意すべきことの1つは、ブロックの要素でできる方法で、インライン要素に幅または高さを設(shè)定することはできません。したがって、インライン要素を正確にサイズにしたい場合は、 <code>inline-blockに切り替えることができます。



1次元レイアウト用のFlexBox

FlexBox（ display: flex ）は、物事を連続または列に並べ、あまりにも大騒ぎせずに揃えたままにしたいときに素晴らしいです。

display: flexたら、その子供はフレックスアイテムになります。これらのアイテム：

• デフォルトで連続して並んでいます
• 言われない限り、包まないでください
• justify-contentとalign-itemsを使用して、簡単に間隔を空けたり、エッジに押したりすることができます

一般的なユースケースはナビゲーションバーです。わずか數(shù)行のコードで水平および垂直にリンクを中心にすることができます。

また、フレックスアイテムは、利用可能なスペースに基づいて成長または縮小することができます。グループ內(nèi)のすべてのボタンを均等に伸ばしたい場合は、 flex-grow: 1トリックを行います。

覚えておいてください：Flexは1次元です。同時にではなく、行や列に最適です。

2次元制御用のグリッド

CSSグリッド（ display: grid ）は、物事がより構(gòu)造化される場所です。 FlexBoxとは異なり、Gridを使用すると、行と列を一緒に定義して、完全なレイアウトシステムを提供できます。

grid-template-columnsとgrid-template-rowsを使用して、列と行を定義します。例えば：

 。容器 {
  ディスプレイ：グリッド;
  Grid-Template-Columns：1fr 2fr 1fr;
}

これにより、3つの列のレイアウトが作成され、中央の列は他の列の2倍の幅です。

また、グリッドはgrid-columnとgrid-rowを使用して、アイテムを正確に正確に配置することができます。 2つの行にまたがるサイドバーが必要ですか？問題ない。

正確な配置が重要な複雑なダッシュボードスタイルのレイアウトには特に便利です。

いつ選択するか

単一の正しい答えはありません - それはあなたが何を構(gòu)築しているかに依存します。

• 完全な要素が必要な場合、またはスタッキング動作が必要な場合はブロックを使用してください
• テキストの行內(nèi)で作業(yè)したり、要素をしっかりと維持するときにインラインに到達(dá)する
• 一方向の単純なアライメントのためにFlexBoxを使用してください - メニュー、ボタン、カード
• 一緒に行と列を完全に制御する必要があるときにグリッドを選択してください

そして時々、あなたはそれらを混ぜます。グリッドレイアウトには、セルの1つにフレックスコンテナが含まれる場合があります。

それぞれの役割を知っていれば、それは複雑ではありません。