Flexboxの究極のガイド—例を通して学ぶ

Flexboxを理解するための最良の方法は何ですか?基本を学び、たくさんのものを作りましょう。そして、それはまさにこの記事でやろうとしていることです。

注意すべきいくつかの事柄

  • この記事は中級の開発者を念頭に置いて書かれており、Flexboxについて少し知っていることを前提としています。だが…
  • CSSを知っているが、Flexboxをまったく知らない場合は、ここに包括的なガイドを作成しました(無料の記事、46分読み)。
  • また、CSSについてよく知らない場合は、CSSの完全な(実用的な)入門書(74レッスンの有料コース)を受講することをお勧めします。
  • ここにリストされている順序でこの記事の例に従う必要はありません。
  • Flexboxは単なるレイアウト手法です。実世界のプロジェクトには、レイアウト以上のものが必要です。
  • div.ohansクラス名が次のdivを参照しているような表記が表示された場合ohans

例1:Flexboxでフォトギャラリーを作成する方法

Flexboxを使用して写真を行と列で実行することは、ほとんどの人が理解するよりも簡単です。

次のような単純なマークアップについて考えてみます。

内に10枚の画像がありmain.galleryます。

main.galleryが利用可能な画面をカバーするようにスタイル設定されていると仮定します。

.gallery { min-height: 100vh}

画像に関するクイックノート

デフォルトでは、画像はinline-block要素です。それらは幅と高さを持っています。画像が大きすぎて線に収まらないなど、サイズによって制約される場合を除いて、線上に残ります。

出発点

すべてをまとめると、上記のすべてのマークアップとスタイルの結果は次のようになります。

今、現場でFlexboxを入手してください。

.gallery { display: flex }

この時点で、画像のデフォルトの動作が変更されています。それらはinline-block要素から存在へと変化しますflex-items.

.galleryで開始されたFlexboxコンテキストの結果として、画像は1行に押しつぶされます。さらに、それらは次のように垂直に沿って伸びます:

これは、Flexboxのデフォルトの動作の結果です。

  1. すべての子要素を1行に押しつぶします。要素をラップしないでください。

これはギャラリーにとって悪いので、次のようにこの動作を変更します。

.gallery { flex-wrap: wrap}

これにより、要素が折り返され、必要に応じて複数の行に分割されます。

2.画像​​は次の行に折り返されます。しかし、それらはまだ垂直に沿って伸びています。画像が歪むので、私たちは確かにその動作を望んでいません。

このstretch動作はalign-itemsflexコンテナのデフォルト値によるものです。

align-items: stretch

それを変更しましょう:

.gallery { ... align-items: flex-start}

これにより、画像が伸びないようになります。それらはデフォルトwidthheight 値を想定します。

また、以下に示すように、垂直軸の始点に位置合わせされます。

これで、Flexboxを利用したギャラリーができました。

Flexboxを使用する利点

現時点では、Flexboxを使用するメリットはあまりありません。Flexboxモデルを開始する前と同じ外観になっています。

レスポンシブギャラリーを無料で入手する以外に、Flexboxを使用する他の利点は、Flexboxがもたらす配置オプションにあります。

フレックスコンテナ.galleryは、次のプロパティ値を想定していることに注意してください。flex-direction: rowjustify-content: flex-startそしてalign-items: flex-start.

ギャラリーのレイアウトは、以下に示すようにデフォルト値をいじることで瞬時に切り替えることができます。

.gallery { ... justify-content:center;}

上の画像に見られるように、これにより、画像が水平方向に沿って中央に配置されます。

.gallery { ... justify-content:center; align-items: center;}

上の画像に見られるように、これは画像を水平方向と垂直方向の両方での中心に揃えます .gallery

Flexboxには、多くの配置オプションがあります。自分に合っていると思われる場合は、さらにいくつかの配置オプションを自由に試してみてください。

このCodePenで実際のFlexboxギャラリーを表示できます。

例2:Flexboxでカードを作成する方法

カードはインターネットで人気があります。グーグル、ツイッター、ピンタレスト、そして他の誰もがカードに移行しているようです。

カードは、関連情報を柔軟なサイズのコンテナーにグループ化するUIデザインパターンです。視覚的にはトランプに似ています。

カードには多くの良い使い方があります。一般的なものは、悪名高い価格設定グリッドです。

作りましょう。

マークアップ

各カードは、以下のようなマークアップを想定しています。

    少なくとも3枚のカードがあります。カードをdiv.cards

    これで、親要素ができました。

    この例では、親要素はビューポート全体を埋めるように設定されています。

    .cards { min-height: 100vh}

    Flexboxを設定する

    次のコードブロックは、内のFlexboxフォーマットコンテキストを開始します .cards

    .cards { display: flex; flex-wrap: wrap}

    最後の例を覚えているなら、flex-wrapflex-items別の行に割り込むことができます。

    これは、子要素が親要素に収まらない場合に発生します。これは、結合された子要素の計算された幅のサイズが大きいためです。

    先に進み.card、初期幅を指定します。

    Flexboxの使用:

    .card { flex: 0 0 250px}

    これにより、flex-growとのflex-shrink値がに設定され0ます。flex-basis値がに設定されます250px

    この時点で、カードはページの先頭に揃えられます。それらはまた垂直に沿って伸びます。

    場合によっては、これはユースケースに理想的かもしれません。しかし、ほとんどの場合、そうではありません。

    Flexコンテナのデフォルトの動作

    上記の結果は、フレックスコンテナのデフォルトの動作によるものです。

    カードは、値に設定されているtop leftため、ページの先頭から始まりjustify-contentますflex-start

    また、デフォルトでにalign-items設定さstretchれているため、カードは親要素の高さ全体を埋めるように伸びます。

    デフォルト値の変更

    Flexboxが提供するデフォルト値を変更することで、かなり印象的な結果を得ることができます。

    下記参照:

    最終的なプロジェクトを表示するには、このCodePenを参照してください。

    例3:Flexboxでグリッドを構築する方法

    CSSフレームワーク全体は、この例で説明する概念に基づいて構築されています。それはかなり重要なことです。

    グリッドとは何ですか?

    グリッドは、コンテンツを構造化するために使用される一連の交差する直線の垂直および水平ガイドラインです。

    BootstrapなどのCSSフレームワークに精通している場合は、これまでにグリッドを使用したことがあるはずです。

    マイレージは異なる場合がありますが、この例ではさまざまなグリッドタイプを検討します。

    最初のものから始めましょう、基本的なグリッド

    基本グリッド

    これらは、次の特性を持つグリッドです。

    • グリッドセルは等間隔に配置し、行全体に合うように拡張する必要があります。
    • グリッドセルは同じ高さである必要があります。

    Flexboxでこれを実現するのは簡単です。以下のマークアップを検討してください。

     1 

    それぞれ.rowが独自のフレックスコンテナになります。

    その中の各要素.rowはフレックスアイテムになります。すべてのフレックスアイテムは、列全体に均等に分散されます。

    設計上、3つの子要素があるかどうかは関係ありません。

     1/3 1/3 1/3 

    または6つの子要素

     1/6 1/6 1/6 1/6 1/6 1/6 

    または12要素

     1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 

    ソリューション

    これを行うには2つのステップがあります。

    1. Flexboxフォーマットコンテキストを開始します。
    .row { display: flex;}

    2.flex-item行全体に同じ比率で収まるように、それぞれを展開します。

    .row_cell { flex: 1}

    以上です。

    ソリューションの説明。

    flex: 1

    flex3つの明確なフレキシボックスのプロパティ、設定するための短縮形のプロパティ名でflex-growflex-shrinkそしてflex-basis順に、プロパティを。

    flex: 1値が1設定されているだけです。この値はflex-grow プロパティに起因します。

    プロパティに設定されますと。flex-shrinkflex-basis10

    flex: 1 === flex: 1 1 0

    特定のサイズのグリッドセル

    必要なのは、等しいセルのグリッド行ではない場合があります。

    他のセルの2倍のセル、またはその分数が必要な場合があります。

    解決策は非常に簡単です。

    これらの特定のグリッドセルに、次のような修飾子クラスを追加します。

    .row_cell--2 { flex: 2}

    クラスをマークアップに含めます。div以下のマークアップの最初の子を参照してください。

     2x 1/3 1/3 

    クラスのあるセルは、.row__cell--2デフォルトのセルの2倍になります。

    使用可能なスペースの3倍を占めるセルの場合:

    .row_cell--3 {

    flex: 3

    }

    特定の配置を持つグリッドセル

    Flexboxのおかげで、各セルを特定の配置値に関連付ける必要はありません。任意のセルに特定の配置を指定できます。

    これを行うには、次のような修飾子クラスを使用します。

    .row_cell--top { align-self: flex-start}

    これにより、特定のセルがの上部に配置されrowます。

    また、マークアップの特定のセルにクラスを追加しておく必要があります。div以下のマークアップの最初の子を参照してください。

    以下は、利用可能な他の配置オプションです。

    .row_cell--bottom { align-self: flex-end}
    .row_cell--center { align-self: center}

    行内の全体的な配置

    特定のセルを整列できるので、行内の子要素全体も整列できます。

    これを行うには、次のような修飾子クラスを使用します。

    .row--top { align-items: flex-start}

    修飾子クラスは.row--toprowまたは親に追加する必要があることに注意することが重要です。flex-container

    その他の配置オプションは以下のとおりです。

    .row--center { align-items: center}
    .row--bottom { align-items: flex-end}

    ネストされたグリッド

    特に何もしなくても、これらrowsをネストすることができます。

    ここで作成された最終的なグリッドを表示できます。

    さらに多くのグリッド

    Flexbox垂直グリッドとさらに複雑な構成で派手な建物グリッドを取得できますが、その作業に最適なツールを使用してください。CSSグリッドレイアウトを学び、習得し、使用します。これは、グリッドに対する究極のCSSソリューションです。

    例4:Flexboxを使用してWebサイトのレイアウトを構築する方法

    コミュニティは一般的に、本格的なWebレイアウトにFlexboxを使用することに眉をひそめています。

    私はこれに同意しますが、場合によってはそれを回避できると思います。

    ここで私ができる最も重要なアドバイスは次のとおりです。

    意味のある場所でFlexboxを使用する

    次の例でそのステートメントを説明します。

    ホーリーグレイルのレイアウト

    悪名高い「聖杯」よりも優れたウェブサイトのレイアウトを構築するにはどうすればよいでしょうか。

    Flexboxでこのレイアウトを作成する方法は2つあります。

    1つ目は、Flexboxでレイアウトを作成することです。置きheaderfooternavarticleおよびasideオールインワンflex-container

    それから始めましょう。

    マークアップ

    以下の基本的なマークアップを検討してください。

     Header  Article Nav Aside  Footer

    とりわけ、聖杯が遵守する特定の規則があります。このルールは、上記のマークアップに影響を与えました。

    中央の列は、article2つのサイドバーの前に、マークアップで最初に表示され、必要があるnavaside

    Flexboxフォーマットコンテキストを開始します

    body { display: flex}

    子要素は上から下にスタックする必要があるため、Flexboxのデフォルトの方向を変更する必要があります。

    body { ... flex-direction: column}

    1 headerそしてfooter、固定幅を持っている必要があります。

    header,footer { width: 20vh /*you can use pixels e.g. 200px*/}

    2.main内の利用可能な残りのスペースを埋めるために作成する必要がありますflex-container

    main { flex: 1}

    あなたが忘れなかったと仮定すると、flex: 1と同等flex-grow: 1flex-shrink: 1あり、flex-basis: 0

    この時点で、我々は内のコンテンツの世話をする必要mainであるarticlenavaside

    mainとして設定flex-container

    main { display: flex}

    を持ってnavaside固定幅を取ります:

    nav,aside { width: 20vw}

    articleが残りの使用可能なスペースを占めることを確認します。

    article { flex: 1}

    今やるべきことがもう1つあります。

    再注文は、flex-itemsそうnav最初に表示されます。

    nav { order: -1}

    このorderプロパティは、の位置を並べ替えるために使用されflex-itemsます。

    flex-itemsコンテナ内のすべてが増加するorder値で表示されます。flex-item最低でorder値が最初に表示されます。

    すべてflex-itemsのデフォルトorder値は0。です。

    ホーリーグレイルレイアウト(別のソリューション)

    以前のソリューションでflex-containerは、全体的なコンテナとしてを使用していました。レイアウトはFlexboxに大きく依存しています。

    より「正気の」アプローチを見てみましょう。想定される最終結果をもう一度見てください。

    headerそして、footerブロック要素として扱うことができます。介入なしで、それらはそれらを含む要素の幅を埋め、上から下に積み重ねます。

     Header  Article Nav Aside  Footer

    このアプローチでは、flex-container必要なのはmain。だけです。

    このアプローチの唯一の課題は、main自分の身長を計算する必要があることです。およびmainによって占有されるスペースに加えて、使用可能なスペースを埋める必要がありますheaderfooter.

    main { height: calc(100vh - 40vh);}

    上記のコードブロックについて考えてみましょう。CSScalc関数を使用しての高さを計算しますmain.

    あなたのマイレージが何であれ、の高さはmainに等しくなければなりませんcalc(100vh — height of header — height of footer ).

    以前のソリューションと同様に、あなたが与えられている必要がありますheaderし、footer固定の高さ。次にmain、前のソリューションと同じように処理します。

    ここで実際の結果を見ることができます。

    2列のウェブサイトのレイアウト

    2列のレイアウトはかなり一般的です。また、Flexboxを使用して簡単に実現できます。

    以下のマークアップを検討してください。

     sidebar main

    Flexboxフォーマットコンテキストを開始します。

    body { display: flex;}

    aside固定幅を与える:

    aside { width: 20vw}

    最後に、main残りの使用可能なスペースがいっぱいになっていることを確認します。

    main { flex: 1}

    それがほとんどすべてです。

    例5:Flexboxを使用したメディアオブジェクト

    メディアオブジェクトはいたるところにあります。ツイートからFacebookの投稿まで、ほとんどのUIデザインで選択できるようです。

    以下のマークアップを検討してください。

    Header

    .media想像のとおり、Flexboxのフォーマットコンテキストを確立します。

    .media { display: flex}

    デフォルトではflex-items、のcontainerは垂直方向に沿って引き伸ばされ、内の使用可能な高さを埋めますflex-container

    .media-bodyが残りの使用可能なスペースをすべて占有していることを確認してください。

    .media-body { flex: 1}

    引き伸ばされた箱を直してみましょう。

    .media { ... align-items: flex-start}

    以上です。

    反転したメディアオブジェクト

    html反転したメディアオブジェクトを作成するためにソースの順序を変更する必要はありません。

    flex-itemのようにsを並べ替えるだけです。

    .media-object { order: 1}

    これにより、.media-bodyとの後に画像が表示されますmedia-heading

    ネストされたメディアオブジェクト

    Mediaオブジェクトをネストすることもできます。私たちが書いたCSSスタイルを変更することなく。

    Header

    Header

    できます!

    Unicodeメディアオブジェクト

    画像だけにとどまらないようです。

    記述されたCSSスタイルを変更せずに、ユニコードで画像を表すことができます。

     ? 

    Header

    そこに絵文字を入れました。

    を削除して、目的のユニコードを含むものにimg置き換えると、div上記の出力が得られます。ここで、さらにいくつかの絵文字ユニコードを取得できます。

    HTMLエンティティメディアオブジェクト

    以下に示すように、htmlエンティティを使用した可能性もあります。

    Header

    この例で使用されているhtmlエンティティはであり、以下の結果が表示される場合があります。

    これらの例の結果は、このCodePenで確認できます。

    例6:Flexboxを使用してフォーム要素を作成する方法

    最近、フォームが1つか2つないWebサイトを見つけるのは困難です。

    以下のマークアップを検討してください。

      … …  …  …

    この例は、入力フィールドをボタンまたはテキストのスパンに揃える組み合わせを示しています。Flexboxを使用すると、解決策は非常に簡単です。

    Flexboxフォーマットコンテキストを開始します。

    .form { display: flex}

    入力フィールドが使用可能なスペースを占めることを確認します。

    .form__field { flex: 1}

    最後に、追加または追加されたテキストとボタンを、適切と思われる方法でスタイル設定できます。

    .form__item { ... }

    このCodePenで、この例の完全な結果を表示できます。

    例7:Flexboxを使用してモバイルアプリのレイアウトを構築する方法

    この例では、以下のモバイルアプリのレイアウトのプロセスについて説明します。

    ただし、この例は異なります。

    モバイルレイアウトを擬似コードで構築するプロセスを説明し、それを構築します。

    これは、手を濡らすための練習の一形態になります。

    ステップ1

    iPhoneからレイアウトを取り除くと、次のようになります。

    ステップ2

    包含ボディをとして定義します flex-container

    ステップ3

    デフォルトではflex-direction、aのflex-containerはに設定されていrowます。この場合は、に変更してくださいcolumn

    ステップ4

    アイテム1と3に次のような固定の高さを与える height: 50px.

    ステップ5

    アイテム2は、使用可能なスペースを埋める高さである必要があります。使用flex-growまたはflex省略形flex: 1.

    ステップ6

    最後に、前の例で見たように、コンテンツの各ブロックをメディアオブジェクトとして扱います。

    上記の6つの手順に従って、モバイルアプリのレイアウトを正常に構築します。

    プロになりたいですか?

    無料のCSSグリッドチートシートをダウンロードして、2つの高品質のインタラクティブFlexboxコースを無料で入手してください!

    今すぐ入手