CSS のフレックス、グリッド、位置: 究極の Tailwind CSS ガイド

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

---

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 レイアウトに最適です。ギャラリー、複雑なレイアウト、その他垂直方向と水平方向の構造が必要な場合に最適です。</p>

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

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

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



<p>この設定では、ギャップ 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>すべてをグリッド内の中央に配置したいですか?これを試してください:<br>
</p>

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



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

<ul>
<li>
<strong>画面サイズに応じて列を調整</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.位置決め: 相対的、絶対的、固定的、およびスティッキー (さらに、時々どのように誤動作するか) ?️‍♂️</strong> CSS の位​​置決めは、いたずら好きな猫を飼いならすようなものです。コツを知らない限り、<em>猫</em> の望むところに進みます。ここでは、それぞれがどのように機能するか、そしてそれらが問題を起こし始めたときのヒントをいくつか紹介します。相対: 動かずに調整を行う<br>
相対位置を使用すると、要素をドキュメントの通常の流れに保ちながら、要素をわずかに調整できます。ちょっとした働きかけに最適です!<br>
</p>

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



<p>absolute: アンカーが必要な自由浮動要素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 要素は、スクロール ポイントに到達するまでは相対的に動作し、スクロール ポイントに到達するとくっつきます。必要な場合にのみスクロールを追跡したいヘッダーに最適です。</p>

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

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




<hr>

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

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



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

<p>スムーズなアニメーションを作成するには、開始状態で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 は、垂直方向と水平方向の両方を中央揃えにするトリックを実行します。
</li>
</ul>

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




<hr>

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

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


<hr>

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


          </div>