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

編集者注: 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 を使用したより優れた応答性の高い画像ギャラリー

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

Angular Resizable

Angular Resizable は、CSS が決定的な役割を果たす、サイズ変更可能なコンテナーを作成するためのソリューションです。

柔軟性

柔軟性は、Flexbox レイアウト モジュールに基づいて開発された拡張レイアウト フレームワークです。このツールは、古い IE などのブラウザーでもより良いレイアウトを作成できるように設計されています。使用済み。

Cyanotype

Cyanotype は、SASS 駆動のインターフェイスに適したレイアウト フレームワークであり、軽量、高速、効率的です。

Ginger

Ginger は、12 列の応答性の高いグリッド システムです。グリッド システムの最も単純なバージョンです。

【高い給料をもらえるのは、スキルがあっても圧倒されないデザイナーだけです！ 】

1. グラフィックデザイン：『すごい！デザイナーの完全独学ガイド』
2. インタラクション デザイン: 『インタラクション デザイナー トレーニング ガイド!優れたインタラクション デザイナーになるためのゼロからの指導"
3. UI デザイン: "超実践的な初心者向けガイド!基礎ゼロで UI デザインを独学するにはどうすればよいですか? 》
4. フロントエンド開発：『天猫達人が教える！フロントエンド開発をゼロから体系的に学ぶにはどうすればよいですか? 》
5. 切り絵スキル：『初心者から上級者まで！ PHOTOSHOPで写真を切り出す徹底ガイド》
6. 配色：「素早く色合わせ！」カラー マッチングを完了するための 3 つの実践的な方法」
7. DPI ガイド: 「基本を学ぼう!デザイナー向け DPI ガイド』
8. インタラクションデザイン独学パスマップ: 『基礎ゼロから始める！非専攻学生のための自習パス マップ - インタラクション デザイン」

元のアドレス: designmodo

原著者: Nataly Birch

最適化された翻訳: @陈子木

この記事は元々 Youshe.com によって翻訳されたものであり、抜粋を再投稿する場合は Youshe のリンクを添付してください。 。編集者の皆様、ご協力ありがとうございました。

[元の記事は Youshe.com からの投稿メールアドレス: 2650232288@qq.com]