フロントエンドのメリット！複雑な Web ページのレイアウトを支援する Flexbox 関連ツール_html/css

編集者注: HTML と CSS は、多くの点で強力なコンテンツ公開メカニズムであり、習得が簡単で、柔軟で強力です。しかし、複雑なレイアウトは苦手だという。複雑な複数列のレイアウトを作成したい場合でも、それを複数のブラウザーに対応させるのは非常に複雑です。この状況に対処するために、CSS3 には、さまざまなレイアウトの操作を容易にする多くのモジュールが含まれています。次に、CSS3 の Flexbox レイアウトモジュールに注目します。

フレックスボックスレイアウトは、CSS3 で最も期待されている実用的な機能の 1 つかもしれません。強力な Flexbox は、タブレットや携帯電話での小規模なレイアウトを容易にするだけでなく、さまざまなタイプの大規模プロジェクトの複雑なレイアウト設計にも十分に対応できます。

Flexbox は、コンテナーのさまざまなプロパティ (幅、高さなど) を制御することで、スペースを効率的かつ簡単に管理できます。この方法では、コントロールがオーバーフローしないようにサブ項目を適切に拡大縮小するだけで済みます。エリアの外にあるため、構造がきれいに保たれます。このスケーリング方法は方向に依存しないため、モバイルデバイス上で非常に快適に表示されます。

現時点での Flexbox の唯一の障害はおそらくブラウザの互換性です。しかし、Blackberry の以前のオペレーティングシステムである Blackberry 10 と古い IE10 には互換性の問題がないことを考慮すると、全体として、この障害は大したことではありません。

今日の記事では、Flexbox に基づいた 20 のソリューションをまとめています。一部はコードスニペットで、一部はフレームワークです。ニーズに応じて適切なものを選択できます。

フレックスボックスエディター

フレックスボックスエディターでは、子要素の追加、削除、選択、およびそのレイアウトや方向の制御が簡単に行えます。、配置および行の折り返しルール。

cssPlus

cssPlus は、最新のブラウザーと完全に互換性のある、軽量で堅牢かつ応答性の高いレイアウトを生成できる標準的な Web スキャフォールディングツールです。全体の UI レイアウトは非常にユーザーフレンドリーで、初心者でも簡単に使用できます。

Bulma

Bulma は安全かつ柔軟な機能を備えており、プロジェクト開発に役立ちます。使用方法は非常に簡単です。新しい列を追加すると、システムがそれをさまざまなブラウザーに自動的に適応させます。

また、柔軟なナビゲーションバー、多機能メディアコントロール、簡単に管理できるコンテンツ、さまざまなクラス、さまざまな基本的なコアコンポーネントも備えています。

Flexbox Grid

Flexbox Grid は、コンテンツをきめ細かく制御できる軽量かつ堅牢なグリッドシステムです。つまり、ネストされたグリッドを使用して、列のサイズ、オフセット、表示幅、配置、その他のプロパティを即時に調整できます。

Kube

Kube は、最新の軽量インターフェイスツールを迅速に構築するために使用される CSS ベースのフレームワークです。明確で正確なタイポグラフィレイアウトを生成でき、グリッドシステムの作成に非常に適しており、現在一般的なデスクトップブラウザとモバイルブラウザをサポートしています。

Flexbox レスポンシブグリッドプレイグラウンド

Marco Lago は Flexbox を使用してレスポンシブデザインテストを行いましたが、結果はあまり理想的とは言えませんが、彼の経験は役に立ちますか?信頼できる出発点として。これを、ネストされたグリッド、可変間隔の流体列レイアウトなどの基礎として使用します。

CSS Flexbox Grid

CSS Flexbox Grid は、人気のあるカードレイアウトからインスピレーションを得た製品です。このテンプレートには、ギャラリーエリア、サイドバーナビゲーション、および上部のナビゲーションバーがすっきりと表示されます。そして全体的にスタイリッシュ。この調和のとれた構造は、さまざまなプロジェクトに適しています。

フレックスボックスの同じ高さの列

このレイアウトは、写真の表示、作業用の表示、ブログ Web サイトに非常に適しています。各ブロックは写真のホストに使用でき、コンテンツは均一です。プレゼンテーションがより複雑になります。グリッドシステムは、さまざまな画面サイズに合わせられる柔軟性があります。

Flexbox カード

名前が示すように、Flexbox カードは、Flexbox とカードスタイルのデザインに基づいたソリューションで、見た目はすっきりしていてバランスが取れています。少しシンプルな印象ですが、カードにはさまざまな情報がきちんと配置され、丁寧に記載されています。それでも、効果はあります。

Feather Flex

Feather Flex は、Flaxbox をベースにしたシンプルでミニマルで非常に軽量なテンプレートです。境界が明確で、間隔が合理的かつ慎重に設定されているため、構造は少し退屈に見えますが、使用範囲は非常に広いです。

フレックスボックスカードレイアウト + フォールバック

このコードスニペットは、カードスタイルのデザインも実装し、CSS クライムの特性を最大限に活用し、検出ツールを使用してブラウザーの互換性の問題を解決します。性的な問題。さらに、クラスの使用には BEM 構文が最大限に活用されています。

フレックスボックスオフキャンバスメニュー

Flexbox Off Canvas メニューは、タッチスクリーンデバイスを中心に設計されており、ユーザーがハンバーガーメニューをクリックすると、サイドバーがスムーズに展開されます。デザインスタイルは新しいものではありませんが、全体的な互換性は良好で、コンパクトでモバイルフレンドリーです。

CSS flexbox を使用したナビゲーションメニュー

これも Flexbox を使用してナビゲーションをデザインするプロジェクトです。このナビゲーションは、快適な外観、典型的な直線構造、最適化された機能を備えています。

モバイルメニュー付きの Flexbox グリッドレイアウト

Lindsey が共有したこのテンプレートは、優れた構成とモダンなデザイン、一貫性の高いヘッダー、合理化されていますナビゲーションバーには画像、コンテンツブロックが表示されます広い領域のフッター。このテンプレートには強い一貫性があります。

Flexbox Grid

Flexbox Grid は Flex に基づいて構築されており、グリッド全体の設計は Bootstrap ルールに基づいているため、ターゲットとなります。別のモジュールとして使用したり、トップコートと組み合わせて使用したりしても、さまざまな画面が優れています。

Flexbox を使用したより優れた応答性の高い画像ギャラリー

注意深く見ると、このギャラリーのデザインは他のものと変わりませんが、実際には興味深い調整が施されています。デスクトップモニターでは、これらの興味深いプロパティを見つけるのは困難です。ただし、タブレットや携帯電話で閲覧を開始すると、すべてのアイテムがグリッドにレイアウトされ、行を占める最終画像がレイアウト全体と同じ幅に拡大されるため、スムーズで一貫したエクスペリエンスが作成されます。