栄光に満ちたインターフェース用Flexbox：トラックの実装（パート2）

smashingmagazine記事の翻訳を続けています。この記事では、例としてTracks Webサイトを使用して、flexboxを使用したインターフェイス開発のすべてのニュアンスを詳しく説明しています 。



パート1

文字列入力フォーム

フォームは、特にPhotoshopで作成された複雑なメッシュデザインに密接に関連している場合、開発者にとって悪夢になり得ます。 私が言う「小文字ラベル」テンプレートは、ロックミュージックのフェンダーストラトキャスターと同じ役割を業界で持っています。



前のセクションで述べたように、ブラウザのサイズが変更されたとき、または動的コンテンツを使用するときに、コンテンツの配置方法を決定し、コンテナのスペースを占有します。









コンテンツの投稿方法を自分で決めてください。 左側では、表形式のディスプレイは中央に垂直に配置されます。 右側のflexboxは、要素を中央に揃えます。



これらのスクリーンショットは、動的または長すぎるコンテンツを使用した場合にフレックスボックスが引き起こす可能性のあるエラーを明確に反映しています。 右側の画像に示されている効果は、「センターオフセット」と呼ばれるものです。これは、コンテンツがx軸とy軸に沿って中心からずれていることを意味します。



これは、図に示すインラインラベルテンプレートのマークアップです。 8。

<div class="form-group"> <label>…</label> <select>…</select> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この場合の問題の解決策は、display：table;を使用することです。 テキストの長さをより便利に制御するため。 これにより、コンテンツがセンターからクロールされるのではなく、下に流れます。

 .form-group { display: flex; } .form-group label { display: table; vertical-align: middle; } .form-group input { flex: 1; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

フレックスボックスとテーブルを組み合わせることは良い方法です。さらに詳しく調べることをお勧めします。 これらの要素を組み合わせるときは、レイアウトのバグを時間内に検出するために、常に異なるテスト環境でテストしてください。



このようなテンプレートを使用して完成した多くの検索フィールドを見てきました。 これは非常に柔軟なテンプレートであり、膨大な数のレイアウトで使用できます。 もちろん、コンテキストに関連するプロパティや一般的なテンプレートに関連しないプロパティなど、介入する可能性のあるCSS要素は分離しておく必要があります。



ここのHTMLはかなり標準的なもので、フレックスボックス構造を定義する周囲のdivが含まれています。



HTMLは次のようになります。

 <div class="form-group"> <input type="text" placeholder="Add a note…"> <button>Add</button> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

CSS

 .form-group { display: flex; } .form-group input { flex: 1; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ドロップダウンメニュー

ドロップダウンメニューは、行の垂直方向に中央に配置されたアイテムを含む左側の列と右側のアイテムのリストで構成されます。リストの各アイテムはそれぞれの行にあります。









このメインインターフェイスのメニューは、レイアウト用のflexboxのみで構築されました。

 <nav class="menu"> <div class="menu__options"> <a href="export-data.html">Export</a> <a href="help.html">Get Help</a> </div> <div class="menu__items"> <a href="account.html">Account</a> <a href="preferences.html">Preferences</a> <a href="users.html">Users</a> <a href="payment.html">Payments</a> <a href="logout.html">Logout</a> </div> </nav>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

CSSはシンプルで読みやすい-開発者が好む方法です。

 .menu { display: flex; } .menu__options { display: flex; align-items: center; } .menu__items { display: flex; flex-direction: column; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ほんの数行のコードで、完璧なレイアウトが得られます。 また、メッシュ構造から分離されており、HTMLとCSSには意味的な意味があります。 これは、複雑なポジショニング戦術と冗長マークアップを回避するフレックスボックスのもう1つの例です。

メディア

フレックスボックスを使用すると、固定幅のSVGが左側に配置され、柔軟なコンテンツがその隣に配置されます。

 <div class="media-obj"> <div class="media-obj__fig">…</div> <div class="media-obj__body">…</div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

CSSは次のようになります。

 .medi-obj { display: flex; align-items: flex-start; } .media-obj__body { flex: 1; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ブラウザのサイズを変更するこの例では、画像の幅は最大100％に設定され、右側は1の柔軟な値に設定されます。固定幅と柔軟な子要素の組み合わせに注意してください。



Flexboxはこの形式のテンプレートではうまく機能しますが、上記のように、コンテンツがそれに隣接するコンテンツにどのように反応するかに注意してください。 上記のビデオでは、グラフィックススペースがどのように折りたたまれ、テキストが画像上に表示されるかを示しています。 この例はばかげているように見えるかもしれません。ブラウザの幅をそれほど小さくすることをほとんど誰も決めていないからです。 一番下の行は、フレックスボックスの使用を開始する前に、コンテンツが環境にどのように関連するかを理解する必要があるということです。



このテンプレートでは、画像の幅をmax-widthに設定することをお勧めします：柔軟な親の内側に並ぶたびに100％にするか、画像に固定幅を与えてから、メディアクエリを使用して必要に応じて画像を構成します。

カレンダー

このアプローチを使用してカレンダーを作成しないようにするにはどうすればよいですか？ 「テーブルを使用しないのはなぜですか」と尋ねるでしょう。 この場合、カレンダーを使用して日付を選択するため、日、月、年ごとにボタンを使用し、これらのボタンを行にバインドすることにしました（カレンダーの各行はdivで囲まれています）。 このアプローチを使用すると、マークアップが少なくなり、レイアウトがシンプルになります。



マークアップは本当に簡単で、カレンダーヘッダーの番号付けコントロールでも機能します。

 <div class="datepicker"> <header class="datepicker__header flex-container"> <button>Left Arrow</button> <span>2015</span> <button>Right Arrow</button> </header> <div class="datepicker__view flex-container"> <button>Jan</button> <button>Feb</button> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

CSSは決して簡単ではありません。 コードを読むすべての人が理解でき、コードを書くときは非常に簡単です。

 .flex-container { display: flex; } .datepicker__header { justify-content: space-between; } .datepicker__view { align-items: center; justify-content: flex-start; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この1か月のカレンダーでは、左側でjustify-content：space-betweenが使用され、右側でjustify-content：flex-startが使用されます。 両方の関数は、コンテンツのレンダリング方法が異なります。



これら2つの例は、すべてを事前に計画する必要がある理由を明確に示しています。 コンテンツはどのように転送されますか？ ビューポートのサイズ変更にどのように反応しますか？ コンテンツを転送する必要がありますか？ コンテンツの適切な戦略を得るには、これらすべての質問に答える必要があります。

レイアウト

Flexboxはインターフェイス要素には最適ですが、特定のテンプレートでも問題なく機能します。





このレイアウトのコードは実装が非常に簡単で、フォールバックオプションに必要な追加コードは最小限です。

adminレイアウトのレイアウトは、上記のように、各コンテナーを保持するdiv要素のセットを使用します。

 <div class="admin-ui"> <div class="admin-ui__nav">…</div> <div class="admin-ui__body"> <nav>…</nav> <main>…</main> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 .admin-ui__body { display: flex; } .admin-ui__body nav { flex: 30%; } .admin-ui__body main { flex: 70%; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここに、レイアウトの優れたフォールバックがあります。 このテンプレートには、複雑なメッシュ構造は含まれていません。 さらに、私たちの旧友のディスプレイ：テーブルは必要なときに私たちを助ける準備ができています。



display：table-cell要素は、CSS 2の時代に導入された強力なCSSツールであり、このための理想的に信頼できるフォールバックです。 この値により、要素はテーブル要素のように動作します。これは、まさにフレックスボックスバージョンを再作成するために必要な動作です。 display：table-header-groupやdisplay：table-footer-groupなどの宣言を使用して、テーブルを使用して並べ替えることもできます。

固定フッター

固定フッター-これは、経験豊富なWebデザイナーの開始儀式の1つで、フッターは表示領域の下部に配置する必要があります。 コンテンツが追加された場合、フッターを下に移動できますが、それ以外の場合、フッターは常に表示領域の下部にある必要があります。









右サイドバーの固定フッター



右サイドバーのレイアウトは次のとおりです。

 <div class="admin-edit"> <button class="admin-edit__save">Save Deal</button> <div class="admin-edit__footer"> <p>…</p> <button>Copy</button> <button>Delete</button> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、これがCSSの外観です。

 .admin-edit { display: flex; flex-direction: column; justify-content: space-between; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に 、フレックスボックスの固定フッターの優れたフォールバックを示します。これは、IE 6までのすべてのバージョンでレイアウトを保持します。



フレックスボックスを使用しようとしたレイアウトの別の部分は、アプリケーションのメインビューでした。または、アプリケーションの「パイプライン」とも呼ばれます。 各カードには特定の幅があり、flexプロパティを使用します。 これにより、各カードに均一な比率が与えられます。











Flexboxでは、各カードにきちんとコンテンツを配置できます。 映画「Start」のように、アプリケーション全体がレイアウトの1つの大きなバージョンであり、flexboxにはflexboxが含まれ、これにはflexboxを使用する小さな原子と分子が含まれます。 開発者が以前に要素を中央に配置することがどれほど困難であったかを考えると信じられないように思えますが、今日はほんの数行のコードでそれを行います。

気をつけて

ブラウザのテスト中に、IE 10でページを表示するときにflexプロパティとインデントなどの他の距離プロパティを組み合わせるとバグが発生することがわかりました

 .parent { display: flex; } .parent .child { flex: 1; padding: 20px; /*    IE 10 */ }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

display：flexで指定されたモジュールの親シェルに、パディングまたはマージンとともにflexプロパティを使用する子がある場合、IE 10でエラーが発生します。



@supports（display：flex）{}関数リクエストはModernizrのようなものですが、ネイティブCSSを使用して実装されます。 残念ながら、現時点では@supportsのサポートはかなり弱いため、このオプションは避ける必要があります。 代わりに、フォールバックオプションのヒントを次に示します。

• Modernizrのno-flexboxクラスを使用して、プロパティを検索します
• 変換またはテーブルマッピングを使用して中央に配置します。
• テーブルマッピングを使用します。
• table-caption、table-header-group、table-footer-groupなどのテーブル表示プロパティで順序を制御します。
• すべての構造のフォールバックとしてフロートを使用します。
• 小文字パターンのフォールバックとして、小文字または小文字のブロックを使用します。
• IE 9以前の条件付きコメントを使用して、フレックスボックスのない外観を作成します。

---