CSS Flexbox ツールボックス – 学習ガイド、ツール、フレームワーク_html/css_WEB-ITnose

から: http://speckyboy.com/2016/02/10/css-flexbox-toolbox/

Flexbox は、CSS コンテナーの項目間のスペースをより効率的に使用する高度な方法です。その理論は少し複雑でマスターするのが難しいように見えますが、ありがたいことに、Web には学ぶための素晴らしい機会がたくさんあります。

クイック ジャンプ: Flexbox 学習ガイド、Flexbox の例とリソース、Web ベースの Flexbox ツール、および Flexbox ベースの Web フレームワーク。

次の CSS ツールボックスも気に入っていただけるかもしれません: CSS アニメーション ツール、フレームワークとチュートリアル、または CSS コードの書式設定、整理、整理のためのツール 。

Flexbox Learning Guides

Flexbox CSS Reference By Sara Soueidan

Flexbox CSS Reference は、基本を学ぶのに役立つ文書集です。さまざまな Flexbox プロパティの概要と、それらの機能の優れたインタラクティブなデモンストレーションがいくつかあります。

Dive into Flexbox – Design、Tools & Workflow by Greg Smith

Dive into Flexbox では、Flexbox がそのような期待を持っている理由、簡単な歴史、Flexbox の概念とプロパティのさまざまな例など、Flexbox に関する背景情報を提供します。

MDN による CSS フレキシブル ボックスの使用

Mozilla 開発者ネットワークから直接提供された CSS フレキシブル ボックスの使用では、レイアウト モードを紹介し、便利なブラウザ互換性チャートを提供します。

Chris Coyier による Flexbox 完全ガイド

Flexbox 完全ガイドには、おそらく、Flexbox について知りたかったが、聞くのを恐れていたすべてが含まれています。ここには、最新情報を得るために役立つ例がたくさんあります。

CSS Flexbox の開始方法 Paul Underwood 著

CSS Flexbox の開始方法では、単純なレイアウトのセットアップという基本から、より複雑な使用例までを説明します。

CSS3 Flexbox プロパティのビジュアル ガイド (Dimitar Stojanov 著)

CSS3 Flexbox プロパティのビジュアル ガイドは、基本概念を理解するのに役立つだけでなく、さまざまなプロパティがレイアウトにどのような影響を与えるかを示す楽しい Flexbox プレイグラウンドもあります。

フレックスボックスって何?! By Wes Bos

FlexBox とは?!は、20 本の無料ビデオの詳細なシリーズを使用して、より視覚的な学習者向けにレイアウトの謎を解き明かします。場合によっては、複雑なトピックになる可能性があるものについて、誰かに見せてガイドしてもらうと良い場合があります。

5 分でわかる flexbox (インタラクティブ ツアー)

長いチュートリアルを読むのにうんざりしている場合は、5 分でわかる flexbox が最適かもしれません。これは、Flexbox の概要と機能をわずか 5 分で説明する簡単なツアーです (53 枚のスライドで構成されています)。

フレックスボックスの例とリソース

フレックスボックス パターン (CJ Cenizal 著)

フレックスボックス パターンでは、開始するためのコードとともに実際の例をいくつか示します。

Solved by Flexbox By Philip Walton

長年求められてきたいくつかのレイアウト シナリオを特集した Solved by Flexbox では、現在簡単に実現できるいくつかのレイアウトの背後にあるテクニックを示します。

Atom 用 Flexbox スニペット

Atom 用 Flexbox スニペットを使用すると、Atom テキスト エディタでコードを簡単に作成できます。

Sublime Text 用の Flexbox スニペット

Sublime Text を使用している場合は、Sublime Text 用の Flexbox スニペットをインストールすると、レイアウトをより効率的に作成できます。

Web ベースの Flexbox ツール

Flexplorer By Bennett Feely

Flexplorer を使用すると、非常にシンプルなインターフェイスを使用して複雑なレイアウトを作成できます。

CSS フレックスボックスをください! by 北村英治

CSS Flexbox お願いします!レイアウト CSS を生成するだけでなく、プロジェクトで使用できる HTML も提供します。

CSS フレックスボックス ルールのライブ テスト By Tayler Summs

CSS フレックスボックス ルールのライブ テストでは、各プロパティが特定のレイアウトに与える影響を示します。

Flexbox Tester 北村英治著

Flexbox Tester を使用すると、レイアウト内の各項目の設定を操作でき、変更を加えると項目のピクセル幅が表示されます。

Flexibility By 10up

Flexibility のシンプルなメニューを使用して、さまざまなプロパティが Flexbox レイアウトをどのように変更できるかを確認します。

Fibonacci Flexbox Page Layout Composer By Max Steenbergen

Fibonacci Flexbox Page Layout Composer は、Flexbox を使用して独自のレイアウトを作成したい非開発者を対象としたツールです。

Flexy Boxes By Pete Boere

Flexy Boxes は、レイアウトを生成し、フレックス コンテナーとアイテムの両方のプロパティを調整するのに役立ちます。

Flexbox Playground By Gabi Siquès

Flexbox Playground は、Flexbox レイアウト プロパティの力について学ぶためのカラフルな方法です。

Flexbox Editor By Brian Diehr

Flexbox Editor を使用して、ボックスをドラッグ アンド ドロップし、そのプロパティを操作します。

Flexbox ベースの Web フレームワーク

Flexbox Grid – flexbox ベースのグリッド システム

Flexbox Grid は、さまざまなタイプのレイアウトを作成するためのサンプルが豊富にある使いやすいフレームワークです。

cssPlus – Flexbox に基づいたレイアウト スキャフォールディング

cssPlus は、すべて Flexbox に基づいた柔軟で応答性の高いレイアウトを作成するのに役立ちます。

STRUCTURE – 宣言型 Flexbox ベースのグリッド フレームワーク

STRUCTURE は宣言型フレームワークです。つまり、要素に非標準の属性を使用します。これにより、各アイテムに複数の CSS クラスを追加するのではなく、開発時間を短縮できます。

Juiced – Flexbox CSS Framework

Juiced は Foundation と Bootstrap からインスピレーションを得ていますが、重いスタイルと JavaScript は省略しています。

…そして最後に…

Flexbox Froggy By Thomas Park

やりながら楽しみながら学びたいですか? Flexbox Froggy は、Flexbox コードを記述する必要があるゲームです。

結論

正しく使用すると、Flexbox を使用すると、最も複雑なレイアウトのセットアップもはるかに簡単になります。コンテンツと画面ビューポートに自動的に調整されるレイアウトを作成できる可能性について考えてみましょう。そして、それはすべて CSS3 に組み込まれています!

今すぐこれらのリソースを使い始めて、レイアウトの筋肉を柔軟にしてください。