Flexboxチュートリアル:CSSFlexboxを使用してレスポンシブナビゲーションバーをコーディングする方法を学ぶ

この記事では、メディアクエリとともにFlexboxを使用して、さまざまな画面サイズに適応するナビゲーションバーを作成する方法について説明します。

このチュートリアルは、Scrimbaの無料のFlexboxコースにインタラクティブなスクリーンキャストとして掲載されています。

コースの詳細については、この記事をご覧ください。

セットアップ

非常に単純なナビゲーションバーのマークアップから始めましょう。

  • Home
  • Profile
  • Logout

ザ・

Original text


    要素はフレックスコンテナであり、
  • 要素は私たちのフレックスアイテムです。それをFlexboxレイアウトに変換するには、次のようにします。

    .container { display: flex; } 

    これにより、次のレイアウトになります。

    いくつかのスタイルを追加しましたが、それはFlexboxとは何の関係もありません。

    いくつかのスタイルを追加しましたが、それはFlexboxとは何の関係もありません。

    ご覧のとおり、右側に少し余分なスペースがあります。これは、Flexboxがアイテムを左から右にレイアウトし、各アイテムの幅がコンテンツによって強制されるのと同じであるためです。

    フレックスコンテナはデフォルトでブロックレベルの要素であるため(そして4つのアイテムよりも幅が広いため)、最後にギャップが生じます。

    検索項目が他の項目よりも広い理由は、入力フィールドがデフォルトでに設定されているためですsize="20"。これは、さまざまなブラウザやオペレーティングシステムがさまざまな方法で解釈します。

    応答性#1

    ナビゲーションバーに基本的な応答性を与えるために、検索アイテムにフレックス値1を与えるだけです。

    .search { flex: 1; } 

    これにより、検索アイテムはコンテナの幅に応じて拡大および縮小します。つまり、右側に余分なスペースができなくなります。

    他のアイテムを修正したまま検索アイテムを拡大することは理にかなっていますが、他のアイテムに比べて幅が広すぎる可能性があると主張することもできます。したがって、代わりにすべてのアイテムをコンテナの幅に合わせて拡大したい場合は、すべてのアイテムにflex値1を指定するだけです。

    .container > li { flex: 1; } 

    これがどのように実行されるかです:

    アイテムに異なるフレックス値を与えることもできます。これにより、アイテムは異なる速度で成長します。このScrimbaの遊び場で自由に試してみてください。

    チュートリアルの残りの部分では、最初のソリューションを続行します。このソリューションでは、検索アイテムだけがflex値を持ちます。

    応答性#2

    私たちのナビゲーションバーは、ワイドスクリーンでうまく機能します。ただし、ここで確認できるように、より狭いものでは問題が発生します。

    コンテナが狭くなりすぎるため、ある時点で、すべてのアイテムを同じ行に配置することは現実的ではありません。これを解決するために、4つのアイテムを2つの行に分割するメディアクエリを追加します。画面の幅が600ピクセルになると、メディアクエリが開始されます。

    @media all and (max-width: 600px) { .container { flex-wrap: wrap; } .container > li { flex-basis: 50%; } } 

    まず、Flexboxレイアウトをでラップできるようにしflex-wrapます。これはデフォルトでに設定されているためnowrap、に変更する必要がありwrapます。

    次に行うことは、アイテムのflex-basis値を50%に設定することです。これにより、Flexboxは、各アイテムが使用可能な幅の50%を占めるようになり、次のように1行に2つのアイテムが作成されます。

    注:プレースホルダーテキストも検索入力フィールドの中央に配置しました。

    注:プレースホルダーテキストも検索入力フィールドの中央に配置しました。

    これで、2つの異なる状態ができました。ただし、このレイアウトは、ポートレートモードのモバイル画面などの非常に小さな画面では機能しません。

    画面を縮小し続けると、下の画像のようになります。

    ここで起こったことは、2番目の行が2つのアイテムに適合できなくなったことです。

    ログアウトと検索アイテムは、その中のコンテンツを埋めるために必要な幅である最小幅よりも小さくすることができないため、単に幅が広すぎます。

    ただし、ホームアイテムとプロファイルアイテムは同じ行に表示できるため、Flexboxで表示できます。すべての行を同じように動作させる必要があるため、これは最適ではありません。

    応答性#3

    だから、できるだけ早くとして、1行の幅が2つの項目が収まらない、我々はしたいどれ行の幅が二つのアイテムを持っていないし。つまり、非常に小さな画面では、実際にナビゲーションバーを垂直にします。アイテムを積み重ねます。

    これを実現するには、50%の幅を100%に変更するだけで、各行が1つのアイテムにのみ収まるようになります。このブレークポイントを400pxに追加します。

    @media all and (max-width: 400px) { .container > li { flex-basis: 100%; } .search { order: 1; } } 

    これに加えて、検索アイテムを一番下に配置したいので、検索もターゲットにしてorder値1を指定します。

    これにより、次のようになります。

    order: 1;検索アイテムが一番下に配置される理由は、フレックスアイテムのデフォルト値がゼロであり、それよりも高い値のアイテムが他のアイテムの後に配置されるためです。

    すべてがどのように実行されるかを確認するために、記事の上部にあるgifを次に示します。

    おめでとうございます!Flexboxとメディアクエリを使用して完全にレスポンシブなナビゲーションバーを作成する方法をマスターしました。

    Flexboxの詳細に興味がある場合は、Scrimbaの無料コースをチェックすることをお勧めします。

    読んでくれてありがとう!私の名前はPerBorgenです。私は、Scrimbaの共同創設者です。コーディングを学ぶ最も簡単な方法です。プロフェッショナルレベルで最新のウェブサイトを構築する方法を学びたい場合は、レスポンシブウェブデザインブートキャンプをチェックしてください。