Flexbox : 柔軟なレイアウトの初心者ガイド-CSSチュートリアル-php.cn

Flexbox : 柔軟なレイアウトの初心者ガイド

王林

リリース： 2024-09-01 20:30:35

オリジナル

308 人が閲覧しました

CSS の世界に足を踏み入れたら、レイアウトに取り組む準備が整いました。素晴らしい！しかし、正直に言うと、レイアウトを扱うのは、目隠しをしてルービックキューブを解こうとしているように感じることがあります。そこで、柔軟で応答性の高いレイアウトをより簡単に作成できる新しい親友である Flexbox が登場します。 Flexbox の魔法の世界に飛び込んで、ボックスを整理しましょう!

Flexbox : A Beginner

そもそもフレックスボックスとは何ですか?

フレックスを開始する前に、1 つだけはっきりさせておきます。フレックスボックスは「Flexible Box Layout」の略です。これは、サイズが不明または動的であっても、スペースを分配し、コンテナー内でアイテムを整列するのに役立つ CSS レイアウトモジュールです。言い換えれば、Flexbox は、どんなに物が多くても、散らかった部屋を完璧に整理整頓する方法を知っている非常に整理整頓された友人のようなものです。

フレックスコンテナとフレックスアイテム

Flexbox は、フレックスコンテナ と フレックスアイテム という 2 つの主要なプレーヤーによって魔法を発揮します。フレックスコンテナは親要素であり、その中のすべての子は自動的にフレックスアイテムになります。コンテナを箱として想像してください。その中のすべてのアイテムは、配置したい柔軟な内容であると想像してください。

これが簡単な例です:

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

ログイン後にコピー

CSS:

.flex-container {
    display: flex;
}
.flex-item {
    background-color: #007BFF;
    color: white;
    padding: 20px;
    margin: 10px;
    border-radius: 5px;
}

ログイン後にコピー

フレックスボックスのプロパティ: 秘密のソース

フレックスコンテナの設定が完了したので、いくつかの Flexbox プロパティを追加して、魔法が起こるのを見てみましょう。

1. flex-direction: 物事の流れ

フレックスボックスを使用すると、項目をレイアウトする方向を制御できます。デフォルトでは、項目は一列に配置されますが、flex-direction を使用して簡単に切り替えることができます。

.flex-container {
    display: flex;
    flex-direction: row; /* Items arranged horizontally */
}

ログイン後にコピー

縦に積み重ねたいですか?簡単！

.flex-container {
    flex-direction: column; /* Items arranged vertically */
}

ログイン後にコピー

2. justify-content: プロのように調整する

アイテム間のスペースを制御する必要がありますか? justify-content があなたをカバーします。主軸 (flex-direction で定義された軸) に沿って項目を水平に配置します。

.flex-container {
    justify-content: space-between; /* Items spread out with space in between */
}

ログイン後にコピー

その他のオプションには、フレックススタート、フレックスエンド、センター、スペースアラウンド、スペース均等などがあります。それぞれが、スペースを分散する異なる方法を提供します。

3. align-items: 垂直方向の位置合わせが簡単に

justify-content は水平方向の配置を処理しますが、align-items は垂直方向の配置 (または 交差軸) を処理します。余白をいじる必要がなく、項目を中央に配置するのに最適です。

.flex-container {
    align-items: center; /* Items are centered vertically */
}

ログイン後にコピー

flex-start または flex-end を使用して、コンテナの先頭または末尾にそれぞれ配置することもできます。

4. flex-wrap: 物事が窮屈になったとき

フレックス項目がコンテナからオーバーフローするとどうなりますか? flex-wrap を入力すると、項目が埋もれてしまうのではなく、複数の行に折り返されるプロパティになります。

.flex-container {
    flex-wrap: wrap; /* Items wrap to the next line */
}

ログイン後にコピー

そのようにして、アイテムのスペースがなくなると、居心地の良い新しいラインが追加されます!

Flexbox を使用したレスポンシブデザイン

Flexbox の優れた機能の 1 つは、レスポンシブデザインを簡単にできることです。画面サイズに基づいて項目を再配置するレイアウトを作成したいと想像してください。 Flexbox はこれを簡単に処理します。

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.flex-item {
    flex: 1 1 200px; /* Flexible items with a minimum width */
}

ログイン後にコピー

この設定では、各 .flex-item は少なくとも 200 ピクセルを占めますが、利用可能なスペースを埋めるために柔軟になります。小さい画面では、自動的に次の行に折り返され、すべてが整然とした状態に保たれます。