フロントエンドのヒーロー、?♂???♀?、CSS Flex、Grid、Positioning に関する本格的なチュートリアルに移ります。追い風(fēng)に乗ってCSSツイスト !センタリングの魔法、配置の狂気、レスポンシブなレイアウト、およびその間のすべてについて説明します。そこで、レイアウトのワンダーランドを旅する準(zhǔn)備をしましょう。そこでは、あらゆるレイアウトを飼いならし、ブラウザーの癖に対処し、物事が獨(dú)自の考えを持っているように見えるときに冷靜さを保つ力を得ることができます。

1. Flexbox (Flex) とそのスーパーパワー
Flexbox は、単次元レイアウト (一度に 1 行または 1 列) の Jedi のようなものです。アイテムを均等に配置したり、中央に配置したり、モバイル上で亂雑に見えないレスポンシブなレイアウトを作成したりすることができます。
はじめに: flex と flex-col まず最初に、Tailwind の flex ユーティリティを使用してコンテナを「フレックス コンテナ」にします。アイテムを並べてご希望ですか?ただフレックスしてください。列に入れる必要がありますか? flex-col を追加します。とても簡単です。

<div>



<p>それらのアイテムを代わりに列に入れますか?<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<h3>
  
  
  必須のフレックスプロパティ
</h3>

<div><table>
<thead>
<tr>
<th>Property</th>
<th>Tailwind Class</th>
<th>What it Does</th>
</tr>
</thead>
<tbody>
<tr>
<td>justify-content</td>
<td>justify-center, justify-end</td>
<td>Aligns items along the main axis</td>
</tr>
<tr>
<td>align-items</td>
<td>items-center, items-end</td>
<td>Aligns items along the cross axis</td>
</tr>
<tr>
<td>flex-wrap</td>
<td>flex-wrap, flex-nowrap</td>
<td>Wraps items to the next line when needed</td>
</tr>
<tr>
<td>flex-grow</td>
<td>flex-grow-0, flex-grow</td>
<td>Allows items to grow</td>
</tr>
<tr>
<td>flex-shrink</td>
<td>flex-shrink-0, flex-shrink</td>
<td>Allows items to shrink</td>
</tr>
<tr>
<td>flex-basis</td>
<td>basis-1/2, basis-full</td>
<td>Sets the initial size of an item</td>
</tr>
</tbody>
</table></div>

<h3>
  
  
  Flexbox を使用したセンタリング: Tailwind の「Just Center It」ソリューション ??♀?
</h3>

<p>Flexbox は、センタリングをヘッドスクラッチから justify-center と items-center の 2 つのクラスに変更します。<br>
</p>

<pre class="brush:php;toolbar:false"><div>




<hr>

<p><strong>2. CSS グリッド: レイアウトのための 2 次元マジック</strong> グリッドは Flexbox の兄弟であり、行 <em> と </em> 列を制御したい 2D レイアウトに最適です。ギャラリー、複雑なレイアウト、その他垂直方向と水平方向の構(gòu)造が必要な場合に最適です。</p>

<h3>
  
  
  グリッドレイアウトの設(shè)定
</h3>

<p>基本的なグリッドを設(shè)定するには、まず Grid クラスと Grid-cols-* クラスを使用して列を定義します。<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p>この設(shè)定では、ギャップ 4 のおかげで、3 つの等しい列があり、それらの間にある程度の呼吸スペースが得られます。</p>

<h3>
  
  
  必須のグリッド プロパティ
</h3>

<div><table>
<thead>
<tr>
<th>Property</th>
<th>Tailwind Class</th>
<th>What it Does</th>
</tr>
</thead>
<tbody>
<tr>
<td>grid-template-columns</td>
<td>grid-cols-3, grid-cols-6</td>
<td>Defines the number of columns</td>
</tr>
<tr>
<td>grid-template-rows</td>
<td>grid-rows-1, grid-rows-2</td>
<td>Defines the number of rows</td>
</tr>
<tr>
<td>gap</td>
<td>gap-4, gap-6</td>
<td>Adds space between grid items</td>
</tr>
<tr>
<td>grid-column</td>
<td>col-span-1, col-span-2</td>
<td>Sets the column span of an item</td>
</tr>
<tr>
<td>grid-row</td>
<td>row-span-1, row-span-2</td>
<td>Sets the row span of an item</td>
</tr>
</tbody>
</table></div>

<h3>
  
  
  グリッドによるセンタリング: Easy Peasy
</h3>

<p>すべてをグリッド內(nèi)の中央に配置したいですか?これを試してください:<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p><em>レスポンシブな不正行為に対処するためのヒント</em><br>
レスポンシブ レイアウトで最も一般的な問題の 1 つは、小さな畫面にすべてを収めることです。 Grid と Flex が動(dòng)作し始めた場合の対処方法は次のとおりです:</p>

<ul>
<li>
<strong>畫面サイズに応じて列を調(diào)整</strong> : sm:grid-cols-2 や lg:grid-cols-4 などの応答性クラスを使用して、畫面幅に基づいてレイアウトを切り替えます。
</li>
</ul>
<pre class="brush:php;toolbar:false"><div>


<ul>
<li>
<strong>ハンドル オーバーフロー</strong> : コンテンツが途切れたりオーバーフローしたりする場合、Tailwind の overflow-auto クラスまたは overflow-hidden クラスを使用すると、その猛獣を飼いならすことができます。</li>
</ul>

<hr>

<p><strong>3.位置決め: 相対的、絶対的、固定的、およびスティッキー (さらに、時(shí)々どのように誤動(dòng)作するか) ???♂?</strong> CSS の位??置決めは、いたずら好きな貓を飼いならすようなものです。コツを知らない限り、<em>貓</em> の望むところに進(jìn)みます。ここでは、それぞれがどのように機(jī)能するか、そしてそれらが問題を起こし始めたときのヒントをいくつか紹介します。相対: 動(dòng)かずに調(diào)整を行う<br>
相対位置を使用すると、要素をドキュメントの通常の流れに保ちながら、要素をわずかに調(diào)整できます。ちょっとした働きかけに最適です!<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p>absolute: アンカーが必要な自由浮動(dòng)要素absolute はフローから要素を削除し、最も近い位置にある祖先 (相対または類似の要素) にアンカーします。相対的な親がないと、ボディに固定されます。</p>

<ul>
<li>
<strong>プロのヒント</strong> : 配置を制御するために、絶対要素には常に相対親を與えます。
</li>
</ul>

<pre class="brush:php;toolbar:false"><div>



<p>修正: スクロールしても常にそこにあるページがスクロールしても要素が 1 か所に留まるように修正されました。これは、粘著性のあるナビゲーションバーには最適ですが、モバイルでは重要なコンテンツと重なると煩わしい場合があります。</p>

<ul>
<li>
<strong>プロのヒント</strong> : 必要に応じて、応答性の高いクラスを追加して、小さな畫面で固定要素を非表示にします。
</li>
</ul>

<pre class="brush:php;toolbar:false"><div>



<p>モバイルで非表示にするには、非表示の sm:block を使用します:<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p>sticky: スクロールするまでくっつきますsticky 要素は、スクロール ポイントに到達(dá)するまでは相対的に動(dòng)作し、スクロール ポイントに到達(dá)するとくっつきます。必要な場合にのみスクロールを追跡したいヘッダーに最適です。</p>

<ul>
<li>
<strong>Sticky の癖</strong> : Sticky が機(jī)能するには、そのコンテナがスクロールするのに十分な高さである必要があります。そうしないと、まったく粘著しない可能性があります。
</li>
</ul>

<pre class="brush:php;toolbar:false"><div>




<hr>

<p><strong>4.トランジションとトランスフォーム: スムーズな移動(dòng)と視覚的なシフト ?</strong><br>
変換では、ドキュメント フロー內(nèi)で実際に位置を移動(dòng)することなく、要素を移動(dòng)、回転、拡大縮小、傾斜させることができます。</p>
<h3>
  
  
  Tailwind 変換の基本
</h3>

<p>translate-x-*、translate-y-*、rotate-*、scale-* を使用して要素の位置を視覚的に調(diào)整します。<br>
</p>
<pre class="brush:php;toolbar:false"><div>



<h3>
  
  
  ホバー効果のスムーズなトランジション
</h3>

<p>スムーズなアニメーションを作成するには、開始狀態(tài)でtransition-*を使用します。 Tailwind のtransition-transform、transition-opacity、transition-all ユーティリティを使用すると、これが簡単になります。<br>
</p>

<pre class="brush:php;toolbar:false"><div>




<hr>

<p><strong>5.コンテンツのセンタリング: フレックスボックス、グリッド、萬能の「配置」ユーティリティ</strong><br>
物事を中心に置くのは驚くほど難しい場合があります。主なトリックは次のとおりです:</p>

<ul>
<li>
<strong>フレックスボックス</strong> : justify-center と items-center を使用します。</li>
<li>
<strong>Grid</strong> : place-items-center は、垂直方向と水平方向の両方を中央揃えにするトリックを?qū)g行します。
</li>
</ul>

<pre class="brush:php;toolbar:false"><div>




<hr>

<p><strong>6.トラブルシューティングのヒント: フレックスとグリッドが異なる畫面で誤動(dòng)作する場合</strong></p>

<ul>
<li>
<strong>グリッドまたはフレックスのアプローチに固執(zhí)する</strong> : 混ぜすぎると、予期しない結(jié)果が生じる可能性があります。</li>
<li>
<strong>レスポンシブ クラスを使用する</strong> : Tailwind のレスポンシブ ユーティリティ (sm:、md:、lg:) は、レイアウトを適切に適応させるのに役立ちます。</li>
<li>
<strong>オーバーフロー修正</strong> : overflow-hidden や overflow-auto などのクラスにより、コンテンツが抑制されます。</li>
</ul>


<hr>

<p><strong>最終的な考え: 落ち著いて追い風(fēng)を吹いてください?</strong> フロントエンドのレイアウトの癖はプロセスの一部であり、宿敵ではないことを覚えておいてください。 Tailwind のユーティリティ クラスといくつかの位置決めのコツを使えば、最もトリッキーなレイアウトでもプロのように扱えるようになります。そして、物事が橫道に進(jìn)んだ場合はどうなりますか？息を吹き込み、中央揃えを追加して、これで完成であることを覚えておいてください。</p>


          </div>