CSS - justify-items プロパティ

こんにちは、Web開発者志望の方々！今日は、CSSの素晴らしい世界に飛び込み、あなたのレイアウトを熟練のプロが作成したかのような見た目にするプロパティについて探求します。それ 就是 justify-items プロパティです。信じてください、このチュートリアルの終わりまでに、あなたは最高裁の判事のようにアイテムを整列させることになるでしょう！ ?

justify-itemsとは？

具体的な内容に入る前に、まず justify-items が何をしているかを理解しましょう。あなたが可愛い小さなグリッドアイテムで満たされたグリッドコンテナを思い浮かべてください。justify-items プロパティは、これらのアイテムがグリッドエリア内のインライン（通常は水平方向）にどのように配置されるかを制御する魔法の杖のようなものです。

シntax

justify-items の基本的なシntaxは非常にシンプルです：

.container {
justify-items: value;
}

ここで value は、すぐに見てみるいくつかのオプションのいずれかです。まず、簡単なグリッドを設定して遊びましょう：

<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>

.grid-container {
display: grid;
grid-template-columns: repeat(2, 100px);
grid-template-rows: repeat(2, 100px);
gap: 10px;
background-color: #f0f0f0;
padding: 10px;
}

.item {
background-color: #3498db;
color: white;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
}

これで、4つのアイテムを持つ2x2のグリッドが作成されます。では、justify-items に使用できるさまざまな値を見てみましょう！

可能な値

以下は justify-items のすべての可能な値の表です：

値	説明
normal	デフォルト値、通常は stretch と同じ動作をします
stretch	アイテムをグリッドエリアいっぱいに伸ばします
start	グリッドエリアの開始位置にアイテムを整列させます
end	グリッドエリアの終了位置にアイテムを整列させます
center	アイテムをグリッドエリア中央に配置します
flex-start	アイテムを開始位置に整列させます（flexコンテナ用）
flex-end	アイテムを終了位置に整列させます（flexコンテナ用）
self-start	アイテムを自分の開始側に整列させます
self-end	アイテムを自分の終了側に整列させます
left	アイテムを左に整列させます
right	アイテムを右に整列させます
baseline	アイテムを基準線に沿って整列させます
last baseline	アイテムを最後の基準線に沿って整列させます
safe center	アイテムを安全に中央に配置します（データ損失を防ぎます）
legacy right	右に整列させます（レガシーサポート用）

さて、これらの値を例で詳しく見てみましょう！

CSS justify-items - normal 値

.grid-container {
justify-items: normal;
}

normal 値はデフォルト値です。ほとんどの場合、stretch と同じ動作をします。グリッドアイテムに「自分らしく」あるよう指示しています！

CSS justify-items - stretch 値

.grid-container {
justify-items: stretch;
}

stretch を使用すると、アイテムは自分のグリッドエリアいっぱいに伸びます。まるでアイテムに「深呼吸して拡張する！」と言っているかのようです！

CSS justify-items - start 値

.grid-container {
justify-items: start;
}

start 値は、アイテムをグリッドエリアの開始位置に整列させます。レースのスタートラインにアイテムを並べるようなものです。

CSS justify-items - end 値

.grid-container {
justify-items: end;
}

逆に、end はアイテムをグリッドエリアの終了位置に押しやります。アイテムがフィニッシュラインに触れるよう努力しているかのようです！

CSS justify-items - center 値

.grid-container {
justify-items: center;
}

center は、アイテムをグリッドエリア中央に配置します。バランスよく、禅のようなレイアウトを作成するのに最適です。

CSS justify-items - flex-start と flex-end 値

.grid-container {
justify-items: flex-start;
}

.grid-container {
justify-items: flex-end;
}

これらの値は start と end に似ていますが、flexコンテナ専用です。start と end のクールないとこのようなものです。

CSS justify-items - self-start と self-end 値

.grid-container {
justify-items: self-start;
}

.grid-container {
justify-items: self-end;
}

これらの値は、アイテムを自分の開始側または終了側に整列させます。書き方によっては、コンテナの開始側や終了側とは異なる場合があります。アイテムが自分の好みの側で寝るかのようです！

CSS justify-items - left と right 値

.grid-container {
justify-items: left;
}

.grid-container {
justify-items: right;
}

これらの値は、その名の通り、アイテムを左または右に整列させます。シンプルで、朝の一杯の珈琏のようなものです。

CSS justify-items - baseline と last baseline 値

.grid-container {
justify-items: baseline;
}

.grid-container {
justify-items: last baseline;
}

これらの値は、アイテムを基準線または最後の基準線に沿って整列させます。異なるサイズのテキストを並べたいときに特に便利です。

CSS justify-items - safe center 値

.grid-container {
justify-items: safe center;
}

この値はアイテムを中央に配置しますが、データ損失を防ぎます。中央配置されたアイテムの安全網のようなものです！

CSS justify-items - legacy right 値

.grid-container {
justify-items: legacy right;
}

この値は後方互換性のためにあります。古いフィーチャーフォンを保持しているようなものです。おそらく使用することはありませんが、必要なときにはあります！

そして、それで、皆さん！justify-items プロパティの whirlwind tour が終わりました。CSSをマスターする鍵は練習です。それでは、これらの値を試してみて、美しく整列されたレイアウトを作成してください。間もなく、あなたは寝ている間にもアイテムを整列させるようになるでしょう！

ハッピーコーディング、そしてあなたのグリッドが常に完璧に整列していることを祈っています！ ??‍??‍?

Credits: Image by storyset