ホームページ > 記事 > ウェブフロントエンド > 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
Dive into Flexbox – Design、Tools & Workflow by Greg Smith
MDN による CSS フレキシブル ボックスの使用
Chris Coyier による Flexbox 完全ガイド
CSS Flexbox の開始方法 Paul Underwood 著
CSS3 Flexbox プロパティのビジュアル ガイド (Dimitar Stojanov 著)
フレックスボックスって何?! By Wes Bos
5 分でわかる flexbox (インタラクティブ ツアー)
フレックスボックスの例とリソース
Solved by Flexbox By Philip Walton
Atom 用 Flexbox スニペット
Sublime Text 用の Flexbox スニペット
Web ベースの Flexbox ツール
CSS フレックスボックスをください! by 北村英治
CSS フレックスボックス ルールのライブ テスト By Tayler Summs
Flexbox Tester 北村英治著
Flexibility By 10up
Fibonacci Flexbox Page Layout Composer By Max Steenbergen
Flexy Boxes By Pete Boere
Flexbox Playground は、Flexbox レイアウト プロパティの力について学ぶためのカラフルな方法です。
Flexbox Editor を使用して、ボックスをドラッグ アンド ドロップし、そのプロパティを操作します。
Flexbox Grid は、さまざまなタイプのレイアウトを作成するためのサンプルが豊富にある使いやすいフレームワークです。
cssPlus は、すべて Flexbox に基づいた柔軟で応答性の高いレイアウトを作成するのに役立ちます。
STRUCTURE は宣言型フレームワークです。つまり、要素に非標準の属性を使用します。これにより、各アイテムに複数の CSS クラスを追加するのではなく、開発時間を短縮できます。
Juiced は Foundation と Bootstrap からインスピレーションを得ていますが、重いスタイルと JavaScript は省略しています。
やりながら楽しみながら学びたいですか? Flexbox Froggy は、Flexbox コードを記述する必要があるゲームです。
正しく使用すると、Flexbox を使用すると、最も複雑なレイアウトのセットアップもはるかに簡単になります。コンテンツと画面ビューポートに自動的に調整されるレイアウトを作成できる可能性について考えてみましょう。そして、それはすべて CSS3 に組み込まれています!
今すぐこれらのリソースを使い始めて、レイアウトの筋肉を柔軟にしてください。