Awesome flexbox

flexboxを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

目次

• W3C仕様
• ニュースレター
• 書籍
• ガイド
• クロスブラウザー
• 記事
• 対応状況
• プリプロセッサーの実践
• Polyfill
• その他の興味深い記事
• プレゼンテーション
• 動画
• スライドとノート
• ツール
• ライブラリとフレームワーク
• 注目プロジェクト
• 講座
• フォローすべき人物
• コントリビューション
• ライセンス

W3C仕様

この仕様は、ユーザーインターフェース設計向けに最適化されたCSSボックスモデルを説明します。

• CSS Flexible Box Layout Module Level 1

ニュースレター

• CSS Layout News
• CSS Weekly
• Responsive Design Weekly
• Web Design Weekly

書籍

• CSS3 Layout Modules 2nd Edition - Rachel Andrew

ガイド

開発者やデザイナーがこの素晴らしい技術の学習を始めるためのガイド。

• A guide to flexbox:metal:
• A visual guide to CSS3 flexbox properties
• flexbox (pt-br)
• Dive into flexbox
• How Flexbox works — explained with big, colorful, animated gifs
• How Flexbox works — explained with big, colorful, animated gifs (pt-br)
• Learn layout - flexbox (pt-br)
• Learn layout - flexbox
• Reference of flexbox
• Responsive design of the future with flexbox
• The Flexbox Reading List: Techniques and Tools
• Um guia visual para Flexbox (pt-br)
• Usando caixas flexiveis CSS (pt-br)
• Using CSS flexible boxes
• What IS Flexbox?
• Desarrollo de aplicaciones web Flexibles (es-es)
• Webflow Flexbox

クロスブラウザー

プロジェクトをどこでも動作させるためのヒントと技法 :D

記事

• 6 Reasons to Start Using Flexbox
• Advanced cross-browser flexbox
• Are we ready to use flexbox?
• CSS Flexbox Is Entirely Logical (Almost)
• Designing A Product Page Layout with Flexbox
• Normalizando bugs no flexbox em diversos navegadores (pt-br)
• Normalizing cross-browser Flexbox bugs
• Using flexbox: mixing old and new for the best browser support
• Using Modernizr with Flexbox

対応状況

• Caniuse

プリプロセッサーの実践

• Compass Flexbox
• Sass flex mixin
• Stylus flex mixin

Polyfill

• Flexibility:metal:
• Flexie
• Reflexie

その他の興味深い記事

Flexboxに関連する話題のリスト。

• Almost complete guide to flexbox (without flexbox):metal:
• Designing CSS layouts with flexbox is as easy as pie
• Flexbox For Interfaces All The Way: Tracks Case Study
• Flexbox’s Best-Kept Secret
• Grid, Flexbox, Box Alignment: Our New System for Layout
• Old flexbox and new flexbox
• Using flexbox today
• Laying Out A Flexible Future For Web Design With Flexbox
• Flexbox Cheatsheet

プレゼンテーション

読むのに疲れましたか？対話型プレゼンテーションを見て、今すぐFlexboxを学びましょう。

動画

• CSS Layout o ontem, o hoje e o depois (pt-br)
• CSS FlexBox Essentials
• CSS FlexBox Practical Examples (Rebuilding Dribbble.com using FlexBox)
• Exploring CSS Layout Techniques While Trying To Get a Subtitle to Wrap
• Enhancing Responsiveness With Flexbox
• Flexbox - CSS Day
• Guía Completa de Flexbox desde 0 (ESP)
• HTML5. Desenvolvimento avançado
• Introduction to Flexbox
• Leveling up with flexbox
• What the flexbox? - 習得を助けるシンプルな20本の動画講座。
• Flexbox Fundamentals

Sketching with CSS Flexboxガイド、著者：@sfioritto

読み物

• Access 20+ Page Guide on Flexbox

動画資料

• Flex-Container Pt. 1: Position Items within a flexbox container
• Flex-Container Pt. 2: Rows and Columns
• Grow and Shrink Flex Items
• Implementing the Sticky Footer and Holy Grail layout

スライドとノート

• Building responsive layouts presentation
• CSS Flexbox: Estruturando layouts sem gambiarras (pr-br)
• CSS3 layout
• Flexbox
• Flexbox and Grid Layout
• Future css layout fowd
• Leveling up with flexbox
• RWD flexbox
• CSS Layout: from Table to Flexbox

ツール

プロジェクト作成を少し助けるツール :D

• Build with Flexbox
• CSS flexbox please
• CSS Flexbox snippets for Atom
• CSS Flexbox snippets for Sublime Text 2/3
• Fibonacci
• Flexbox in 5 minutes
• Flexbox playground
• Flexbox property manipulator
• Flexplorer
• Flexyboxes
• Test CSS Flexbox Rules Live
• Try Flexbox

ライブラリとフレームワーク

Flexboxベースの優れたライブラリ一覧。

• Bem grid
• Flexboxgrid:metal:
• Flex Grid Framework:metal:
• Flexbox Grid for Stylus
• Fuux - クラスと同様のFlexboxインターフェースを使うFlexboxライブラリ。
• Ginger Grid - かわいい犬にちなんで名付けられたFlexboxグリッドフレームワーク。
• Bulma - Flexboxベースの現代的CSSフレームワーク。
• Milligram - 最小限のCSSフレームワーク。
• RolleiFLEX - レスポンシブFlexboxグリッド。
• Waffle Grid - 使いやすいFlexboxグリッドシステム。

注目プロジェクト

Flexboxに関する優れたプロジェクト。

• Cool examples of flexbox layout - CodePenコレクション。
• flex-box - Flexboxの基本を使いやすくするCustom Element。
• Flexbugs - Flexboxの問題とクロスブラウザー回避策をコミュニティがまとめたリスト。
• Flexbox Froggy - CSS Flexboxを学ぶゲーム。
• Flexbox Patterns - CSS FlexboxでUIコンポーネントを構築する方法を教える例とソースコード。
• Flexbox Defense - すべての塔をCSS Flexboxで配置する、ひねりのあるタワーディフェンス。
• Flexbox tester - Flex Itemの幅の計算方法を理解する。
• Flexbox layout - CSS Flexible Box Layout Moduleに似た機能をAndroidへもたらすライブラリプロジェクトFlexboxLayout。
• FlexLayout for iOS - Swiftを使ってFlexboxをiOSへ提供。簡潔、直感的、連鎖可能な構文。
• grid-styled - styled-componentsで構築されたFlexboxベースのレスポンシブReactJSグリッドシステム。
• iron-flex-layout - クロスプラットフォームFlexboxレイアウト向けStyle Mixin。
• Post Apocalypse Flexbox
• React-flexbox - インラインスタイルを使うReactでのCSS Flexbox実装。
• Reflexbox - レスポンシブReact Flexboxグリッドシステムの高階コンポーネント。
• Solved by flexbox - 以前はCSSだけで解くのが困難または不可能だった問題が、Flexboxで非常に簡単になった事例集。:metal:
• Visualizing Flexbox - Flexプロパティを試せる小さく優れたCodePenデモ。
• ZEEF CSS Flexbox - ZEEF上のAwesome Flexbox。:metal:
• Flexbox Zombies - CSS Flexboxを学ぶゲーム。

講座

• CSS Flexbox Layout - Treehouse。
• Learn Flexbox for free - Scrimba。

フォローすべき人物

この話題について発信する人々。

• Afonso Pacifer @afonsopacifer
• Brad Frost @brad_frost
• Chris Coyier @chriscoyier
• Lea Verou @LeaVerou
• Mickley Gillenwater @zomigi
• Nicolas @necolas
• Philip Walton @philwalton
• Rachel Andrew @rachelandrew
• Richard Herrera @doctyper
• Sara Soueidan @SaraSoueidan
• Sean Fioritto @sfioritto

コントリビューション

コントリビュートしたいですか？こちらの推奨事項に従ってください。

ライセンス

MIT License © Afonso Pacifer